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

[sg550]

При нажатии на ссылку рядом с ней должно появляться поле ввода, которое создается с помощью js. Возник вопрос: как желательнее делать - 1-ым методом (через DOM), или вторым (через innerHTML)? И что будет быстрее работать?

1-ый метод:

var Elem = {
	setAttrs : function(elem, attrs){
					for(var a in attrs){
						elem.setAttribute(a, attrs[a]);
					}
				},
	newElem : function(elem, attrs){
					var el = document.createElement(elem);
					Elem.setAttrs(el, attrs);
					return el;
				},
	newTxt : function(elem, txt){
					elem.appendChild(document.createTextNode(txt));
				}
}
var prompt 	= 	Elem.newElem('table', {class:'std_form', id:'quickreply'});
		prompt.innerHTML = "<tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td colspan=\"2\"></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr>";
		
		var name = Elem.newElem('input',{type : 'text', name : 'name', id : 'name', size:'30', value : "asdasd"});
		
		var subj = Elem.newElem('input', {type : 'text', name : 'subject', id : 'subj', size:'30', value : "фывыфв");
		var txtarea = Elem.newElem('textarea', {wrap : 'virtual',	name : 'message', id : 'quickreplytxt', cols:'60', rows:'10'});
		var submit = Elem.newElem('input', {type : 'submit', value: 'Отправить'});
		Elem.newTxt(prompt.cells[0], "Имя: ");
		Elem.newTxt(prompt.cells[4], "Тема комментария: ");
		
		prompt.getElementsByTagName('td')[1].appendChild(name);
		prompt.getElementsByTagName('td')[5].appendChild(subj);
		prompt.getElementsByTagName('td')[6].appendChild(txtarea);
		prompt.getElementsByTagName('td')[10].appendChild(submit);
		
		elem.appendChild(prompt);
		txtarea.focus();

2-ой метод:

var prompt  =   document.createElement('table');
prompt.innerHTML = "<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>";

[exec]

А потестить не судьба?

[x-yuri]

2-ой метод, только не надо столько экранирования, можно использовать одинарные кавычки, а внутри двойные или наоборот. И не надо все в одну строку писать

а по поводу производительности: доделываешь страничку, а _потом_ начинаешь искать _узкие места_

[Маэстро]

Прервый метод (DOM) - это программирование. Второй (HTML) - это "разметка текста". Лично я склоняюсь к программированию!

При небольших количествах элементов на странице оба способа практически эквивалентны. Причем способ с innerHTML иногда выглядит читабельнее; и его можно быстрее написать.
Однако, на больших количествах элементов появляется разница.
Можете попробовать нарисовать таблицу 100 строк х 100 столбцов. По моим оценкам var o=getElementById (с которым прийдется работать при innerHTML ) работает заметно медленнее, чем прямое указание javascript объекта var o=someobject

var someobject = document.createElement('div');

Особенно торможение заметно в IE.
Хотя теоретически по скорости должны работать одинаково.

Поэтому лучше DOM. Но... существует ряд проблем, которые без innerHTML не решишь.
Например, Вы хотите создать форму с элементом "input" типа "file":

var f=document.createElement('form');
f.method='POST';
f.action='lalala.php';
f.enctype='multipart/form-data';
... ...

Это работать не будет в IE. У него глюк с enctype.
Как быть? - Только вот так:
o.innerHTML='<form enctype="multipart/form-data"></form>';
... ...

[рони]

Маэстро,
а так ? ))

var f = document.createElement("form");
f.method = "POST";
f.action = "lalala.php";
f.setAttribute("enctype", "multipart/form-data");
f.setAttribute("encoding", "multipart/form-data");
var i = document.createElement("input");
i.setAttribute("type", "file");
f.appendChild(i);
document.body.appendChild(f);

[x-yuri]

Однако, на больших количествах элементов появляется разница.
Можете попробовать нарисовать таблицу 100 строк х 100 столбцов. По моим оценкам var o=getElementById (с которым прийдется работать при innerHTML ) работает заметно медленнее, чем прямое указание javascript объекта var o=someobject

во-первых, это же не ядро какого-нибудь фреймворка, которое неизвестно в каких условиях работать будет. И то я не думаю, что такие вещи оптимизируются по принципу "оптимизируем все, что движется". Так вот, это вполне конкретный случай, и можно померять, что тормозит и сколько можно выжать за счет оптимизации, если так интересно. Только надо осознавать, что ускорение в 1 мс пользователь не заметит
во-вторых, почему прийдется работать с getElementById и о каком прямом указании javascript-объекта идет речь? Здесь, кстати, с getElementById работать не пришлось

Хотя теоретически по скорости должны работать одинаково.

In theory there is no difference between theory and practice.
In practice there is.
Yogi Berra

[Kolyaj]

Однако, на больших количествах элементов появляется разница.

О да, и какая разница! При создании объёмного HTML кода DOM методами у вас такая неподдерживаемая каша в коде будет, мама не горюй.

Прервый метод (DOM) - это программирование. Второй (HTML) - это "разметка текста".

И то, и другое -- разметка.

[Маэстро]

f.setAttribute("enctype", "multipart/form-data");
f.setAttribute("encoding", "multipart/form-data");

а так ? ))

Да, Вы правы. Установка свойств с помощью setAttribute решает проблему в IE; причём устанавливать надо и enctype, и encoding.
Только недолюбливаю я setAttribute()... или он меня недолюбливает...?

[Kolyaj]

Только недолюбливаю я setAttribute()... или он меня недолюбливает...?

http://xpoint.ru/know-how/JavaScript/Atributyi?8
Любите друг друга.

[Маэстро]

во-первых, это же не ядро какого-нибудь фреймворка, которое неизвестно в каких условиях работать будет.

-привычка писать быстроработающий и кроссбраузерный код позволит в дальнейшем программисту накопить опыт и написать фреймворк. А мало ли... может и прийдётся...?

Только надо осознавать, что ускорение в 1 мс пользователь не заметит

-речь идёт не об ускорении в 1 мс, а (грубо говоря) замедлении в 1 мс НА КАЖДЫЙ добавленный элемент. И если элементов на странице 1000, то, замедление хорошо заметно.

во-вторых, почему прийдется работать с getElementById и о каком прямом указании javascript-объекта идет речь? Здесь, кстати, с getElementById работать не пришлось

-покажу на моём примере с таблицей 100х100.
Пользователь прописывает формулу, в которой указывает, что типа возьми значение из ячейки талицы строки №5, столбца №30 и прибавь к ячейке 10/40.
Как бы решить такую задачку? Очевидно что каждую ячейку надо снабдить своим id, каждый из которых будет вида "cell_xxx_yyy", где xxx-номер строки, а yyy-номер столбца. Дальше искать эти ячейки методом
getElementById('cell_5_30') и getElementById('cell_10_40')
Это при создании таблицы с помощью HTML.

Если же всю таблицу создавать "на лету" с помощью javascript, то id ячейкам можно не задавать, т.к. мы имеем ПРЯМЫЕ УКАЗАТЕЛИ на ячейки таблицы:
o_1_1= document.createElement("div");
o_1_2= document.createElement("div");
o_1_3= document.createElement("div");
...
и по ним можем сразу обращаться к содержимому ячеек.