Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2010, 15:38
Интересующийся
Отправить личное сообщение для sg550 Посмотреть профиль Найти все сообщения от sg550
 
Регистрация: 14.07.2010
Сообщений: 11

динамическое создание элементов
При нажатии на ссылку рядом с ней должно появляться поле ввода, которое создается с помощью 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>";
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2010, 15:51
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

А потестить не судьба?
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2010, 21:35
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

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

Последний раз редактировалось x-yuri, 14.07.2010 в 21:40.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2010, 20:40
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Прервый метод (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>';
... ...
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2010, 23:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,783

Маэстро,
а так ? ))
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);
Ответить с цитированием
  #6 (permalink)  
Старый 30.07.2010, 03:09
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Маэстро
Однако, на больших количествах элементов появляется разница.
Можете попробовать нарисовать таблицу 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
Ответить с цитированием
  #7 (permalink)  
Старый 30.07.2010, 07:31
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

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

Сообщение от Маэстро
Прервый метод (DOM) - это программирование. Второй (HTML) - это "разметка текста".
И то, и другое -- разметка.
Ответить с цитированием
  #8 (permalink)  
Старый 30.07.2010, 13:19
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от рони;
f.setAttribute("enctype", "multipart/form-data");
f.setAttribute("encoding", "multipart/form-data");

а так ? ))
Да, Вы правы. Установка свойств с помощью setAttribute решает проблему в IE; причём устанавливать надо и enctype, и encoding.
Только недолюбливаю я setAttribute()... или он меня недолюбливает...?
Ответить с цитированием
  #9 (permalink)  
Старый 30.07.2010, 13:21
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Маэстро
Только недолюбливаю я setAttribute()... или он меня недолюбливает...?
http://xpoint.ru/know-how/JavaScript/Atributyi?8
Любите друг друга.
Ответить с цитированием
  #10 (permalink)  
Старый 30.07.2010, 13:49
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

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

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

Сообщение от x-yuri
во-вторых, почему прийдется работать с 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");
...
и по ним можем сразу обращаться к содержимому ячеек.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое создание таблицы Arfey Общие вопросы Javascript 7 10.06.2010 13:14
Динамическое создание Iframe Арсений Элементы интерфейса 12 19.05.2010 14:03
Динамическое создание событий в цикле IcyBox Общие вопросы Javascript 2 01.06.2009 07:42
IE: создание элементов. Jurasmi Events/DOM/Window 12 28.11.2008 01:10
Создание элементов createElement в IE. Phoenix Общие вопросы Javascript 6 26.09.2007 18:43