динамическое создание элементов

[x-yuri]

Реальный пример я показать не могу

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

[Маэстро]

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

Хорошо. Попробую описать. Только навряд ли Вы захотите это сделать из спортивного интереса.
Понимаете, у меня как бы в принципе нет HTML-вёрстки в привычном понимании этого слова при разработке сайта.
Все объекты хранятся в базе. Предположим их два типа: автомобили и контейнеры (морские). Каждый объект обладает набором свойств. Часть свойств одинакова (например, координаты и название), а часть свойств разные. Причём те свойства, которые разные - это не свойства DOM-объектов, а бизнес-свойства. Например, у машины есть марка и кубометраж. У контейнера есть тоннаж и условия инкотермс (FOB, CIF, DDP,...) которых нет у автомобиля. Все бизнес-свойства должны в конечном итоге отображаться на экране в виде картинок, текстов, таблиц, полей ввода.... То есть, каждый объект на экране - это комплект из table, div, img и т.д.
Свойства объектов не верстаются (как на типичных сайтах), а добавляются самими пользователями, для чего имеется набор "стандартных" заготовок.

Как это реализовать?
Вариант первый:
формировать весь html-текст на сервере (например, PHP) и отправлять клиенту. Объем получится не менее 1 Мегабайта. Все объекты прийдётся снабдить уникальными id, для дальнейшего оперирования ими.

Вариант второй:
Формировать DOM-объекты всего этого пространства с помощью javascript на клиенте; клиенту отправлять только массив чисто данных (любым транспортным механизмом).

В заключение добавлю, что все объекты отображаются на некой "карте местности", размер которой 30000х30000 пикселей. И не думайте, что я ошибся в ноликах

[x-yuri]

ну так это же совсем другой случай, в отличие от указанного в первом сообщении топика. Есть три вида компонентов: карта, автомобили, контейнеры. У каждого минимум разметки, судя по описанию, т.е. по сути каждый из них - это один абсолютно-спозиционированный div. Причем карта просто содержит коллекцию автомобилей/контейнеров, т.е. нету никакого сложного шаблона, по которому автомобили/контейнеры включаются в карту. Создавать разметку каждого компонента проще создавать с помощью createElement, потому что каждый элемент - это один div

в общем, чем сложнее шаблон, тем лучше подходит innerHTML

p.s. мы собирались сравнивать innerHTML vs createElement/appendChild...

[Маэстро]

... т.е. нету никакого сложного шаблона, по которому автомобили/контейнеры включаются в карту.

ну да

Создавать разметку каждого компонента проще создавать с помощью createElement, потому что каждый элемент - это один div

так а я о чём говорю? именно о том, что лучше createElement, а не innerHTML.
подчеркну только, что что каждый элемент - это не один div, а один div, содержащий в себе ещё кучу div_ов и других элементов.

а главное, я утверждал, что при использовании innerHTML приходится снабжать элементы идентификаторами, а потом обращаться к ним с помощью GetElementByID(). и при их большом количестве начинается торможение

[x-yuri]

так а я о чём говорю? именно о том, что лучше createElement, а не innerHTML

а я говорю, что чем сложнее шаблон, тем лучше подходит innerHTML

подчеркну только, что что каждый элемент - это не один div, а один div, содержащий в себе ещё кучу div_ов и других элементов

если там еще куча div'ов и других элементов и вы говорите, что с innerHTML медленнее, давайте картинку с описанием, сравним производительность генерации разметки

а главное, я утверждал, что при использовании innerHTML приходится снабжать элементы идентификаторами, а потом обращаться к ним с помощью GetElementByID(). и при их большом количестве начинается торможение

не обязательно снабжать их id

[x-yuri]

по вашему опсанию получается где-то так

var Map = new Class({
    initialize: function(){
        this._objs = [];
        this._el = new Element('div');
    },

    addObject: function( o ){
        this._objs.push( o )
        o.inject(this._el);
    }
});

var Car = new Class({
    initialize: function(){
        this._el = new Element('div');
    }
});

var map = new Map();
var car = new Car();
map.addObject(car);

если же там не просто div, то

this._el = new Element('div')

превращается в что-то типа

this._el = template(
    '<table>'+
        '<tr><td>Имя:</td>'+
            '<td><input type="text" name="name" id="name" /></td>'+
        '</tr>'+
        '<tr><td>Тема: </td>'+
            '<td><input type="text" name="subject" id="subj" /></td>'+
        '</tr>'+
        '<tr><td><textarea wrap="virtual" name="message" id="quickreplytxt" cols="60" rows="10"></textarea></td></tr>'+
        '<tr><td></td>'+
            '<td><input type="submit" value="Отправить" /></td>'+
        '</tr>'+
    '</table>');

[Маэстро]

не обязательно снабжать их id

Вы это написали, а потом в своём примере все три поля input снабдили id!
(id="name", name="subject", id="quickreplytxt")
Зачем id? -затем, чтобы взять значение переменной, или прописать его туда.

теперь насчёт "this._el = ..."
Когда вся эта "Карта полётов" уже создана (а так её называет Заказчик), то все ссылки "this" уже забыты. И вот наступает момент, когда поступает информация, что груз номер 5 едет в автомобилях 7,8 и 15 (к примеру). Как обратиться к элементам 7,8 и 15? Очевидно, что либо снабдить их id_шками типа id=object_7, id=object_8, id=object_15. Либо, ещё при создании запомнить все созданные this._el в отдельном массиве например, map[...] (можно в объекте map{} ) и тогда при поиске элементов делать не
o=document.getElementById('object_7')
a
o=map[7]; - вот это я и называл прямым доступом к объектам.

[x-yuri]

Вы это написали, а потом в своём примере все три поля input снабдили id!

это был копипаст из поста ТС

теперь насчёт "this._el = ..."

использование innerHTML не означает использование getElementById, и вполне совместимо с хранением ссылок на нужные DOM-объекты в javascript-объектах

[x-yuri]

продолжая пример (если нужно обращаться к textarea)

var Car = new Class({ 
    initialize: function(){ 
        this._el = template( 
            '<table>'+ 
                '<tr><td>Имя:</td>'+ 
                    '<td><input type="text" name="name" id="name" /></td>'+ 
                '</tr>'+ 
                '<tr><td>Тема: </td>'+ 
                    '<td><input type="text" name="subject" id="subj" /></td>'+ 
                '</tr>'+ 
                '<tr><td><textarea wrap="virtual" name="message" id="quickreplytxt" cols="60" rows="10"></textarea></td></tr>'+ 
                '<tr><td></td>'+ 
                    '<td><input type="submit" value="Отправить" /></td>'+ 
                '</tr>'+ 
            '</table>');
    },

    _textarea: function(){
        if( ! this._textareaEl )
            this._textareaEl = this._el.getElement('textarea');
        return this._textareaEl;
    }
});