Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.07.2012, 14:28
Yes Yes вне форума
Интересующийся
Отправить личное сообщение для Yes Посмотреть профиль Найти все сообщения от Yes
 
Регистрация: 12.08.2011
Сообщений: 17

Как правильнее создавать\добавлять элементы в структуре DOM ?
Как правильнее создавать\добавлять элементы в структуре DOM ?

var img = document.createElement("img");
  img.id = "new_img";
  img.src = "pic.jpg";
document.getElementById("pictures").appendChild(img);

Или вот так:
document.getElementById("pictures").innerHTML="<img id='new_img' src='pic.jpg' />";

а мож быть так
var img="<img id='new_img' src='pic.jpg' />";
document.getElementById("pictures").appendChild(img);

Последний раз редактировалось Yes, 26.07.2012 в 14:32.
Ответить с цитированием
  #2 (permalink)  
Старый 26.07.2012, 14:37
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Yes,
1 - вариант правильней
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #3 (permalink)  
Старый 26.07.2012, 14:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Yes,
1-й
Поскольку при втором, могут пропадать события , уже установленные внутри элемента
Ответить с цитированием
  #4 (permalink)  
Старый 26.07.2012, 14:46
Yes Yes вне форума
Интересующийся
Отправить личное сообщение для Yes Посмотреть профиль Найти все сообщения от Yes
 
Регистрация: 12.08.2011
Сообщений: 17

Большое спасибо, за ответ и пояснение)
Ответить с цитированием
  #5 (permalink)  
Старый 26.07.2012, 15:37
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

На мой взгляд, оба хороши (третий ошибочный), использование зависит от ситуации.
Помнить только, что при добавлении к innerHTML (+=) идёт перезапись и обработчики внутренних элементов (если они не в атрибутах) теряются и то, что не все теги позволяют делать перезапись innerHTML (например, table и tr в IE этого не позволяют).
Там, где не нужны обработчики или они записаны в атрибутах и нет внутреннего содержимого с обработчиками, я бы использовал перезапись innerHTML.

Последний раз редактировалось bes, 26.07.2012 в 15:40.
Ответить с цитированием
  #6 (permalink)  
Старый 26.07.2012, 21:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Yes
Как правильнее создавать\добавлять элементы в структуре DOM ?
можно даже так - ибо appendChild возвратит добавленный элемент
var img = document.getElementById("pictures").appendChild(  document.createElement("img")  );
img.id = "new_img";
img.src = "pic.jpg";

и от добавления классов\ИДшников отрисовка\перерасчёт будут сделаны столько же раз, сколько и при приведённом в первом посте примере, ибо в браузерах сейчас всё такое ленивое
Ответить с цитированием
  #7 (permalink)  
Старый 26.07.2012, 21:54
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

var fragment = document.createDocumentFragment();

fragment.appendChild( child1 ); // никаких перерисовок не будет
fragment.appendChild( child2 ); // никаких перерисовок не будет
fragment.appendChild( child3 ); // никаких перерисовок не будет
fragment.appendChild( child4 ); // никаких перерисовок не будет

//..................... some code

document.body.appendChild( fragment ); // перерисовка будет лишь раз.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как связать элементы?! S@IIIOk Элементы интерфейса 3 25.04.2012 17:16
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 15:19
DOM vs iframe. Как в ифрейме заменить выделенный текст (его innerHTML)? Бухалыч Events/DOM/Window 4 20.08.2009 13:30
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 17:53
Как правильнее? Рикка (X)HTML/CSS 8 09.10.2007 08:30