Динамические html элементы

[sky]

Здравствуйте,
На странице имеется список ссылок (перечисление) чего-либо.
При клике по ссылке, необходимо отобразить несколько фотографий соотв. данной ссылке, а так же для каждого фото вывести на страницу checkbox как элемент управления (которы можно использовать для того чтобы пользователь мог выбрать нужные фотографии, например, для удаления).

Одна фотография отображается следущим набором html элементов.

<div>
    <img   class="photo" src="/img/emty.png" />

    <input class="photo-id" type="checkbox" value="" name="" />
</div>

По клику по ссылке запрашиваю на сервере данные и получаю результат в json, содержащий массив путей до соответсвующих фотографий.

А так как кол-во фотографий заранее не известно, возникает
Вопрос: Подскажите, пожалуйста как с точки зрения идиалогии разработки на JavaScript, правильно, граматно делать:

1. В конце html страницы всегда держать блок с нужными html элементами (как исходник кода), который копировать и вставлать в нужное место на странице и изменять потом атрибут src для тега img, и value для тега input. Итак столько раз сколько нужно. ?

2. Или у сервеа сразу запрашивать все нужные и заполненые html элементы и просто вставлять на страницу?

3. Кто как ещё делает?

[cooli0]

Я бы генерировал JS на стороне сервера, в виде литеральной нотации, и вставлял бы этот кусок в HTML. Результат - когда пользователь загружает страницу, - сразу инициализировать объект с нужными путяым к фотографиям. Дабы между ссылками и фотографиями была связь - присвоить idишники ссылкам - и соответсвенно ваш сгенерированный объейт выглядел {<id1>: '<img_src1>', <id2>: '<img_src2>', ...etc... }

То есть:

<script type="text/javascript">
MYObject.init({id1: 'http://../img1.png', id2: 'http://../img2.png' });
</script>

На кажую ссылку повестиь event onclick (именно Event, а не onclick аттрибут). Общий код (очень приблизительный):

// обезопасим внешний контекст
(function() {

  var MYObject = {

    images: undefined,

    image_html: "\
         <div>\
            <img src="{img_src}">\
            <input type="checkbox">\
         </div>\
    ",

    init: function(obj) {
       this.images = obj;
       this.applyEvents();
    },

    _applyEvents: function() {
       this._setAnchorEvents();
       // ...другие евенты....
    },

    _setAnchorEvents: function() {
       // ищем нужные тэги a и ставим event onclick на функцию _showImage
    },

    _showImage: function(event) {
       // получить target элемент - ваш тэг a
       var id = targetEl.id;
       var html = this._renderImageHtml(id);
       document.getElementById('КУДА ВСТАВИТЬ КОНТЕНТ') = html;
    },
    
    _renderImageHtml: function(id) {
       return this.image_html.replace(
           "{img_src}", this.images[id]
       );
    }

  };

  // сделаем MYObject доступным из вне
  window.MYObject = MYObject;

})();

[sky]

Спасибо, попробую разобраться