Как правильнее создавать\добавлять элементы в структуре 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,
1 - вариант правильней |
Yes,
1-й Поскольку при втором, могут пропадать события , уже установленные внутри элемента |
Большое спасибо, за ответ и пояснение)
|
На мой взгляд, оба хороши (третий ошибочный), использование зависит от ситуации.
Помнить только, что при добавлении к innerHTML (+=) идёт перезапись и обработчики внутренних элементов (если они не в атрибутах) теряются и то, что не все теги позволяют делать перезапись innerHTML (например, table и tr в IE этого не позволяют). Там, где не нужны обработчики или они записаны в атрибутах и нет внутреннего содержимого с обработчиками, я бы использовал перезапись innerHTML. |
Цитата:
var img = document.getElementById("pictures").appendChild( document.createElement("img") );
img.id = "new_img";
img.src = "pic.jpg";
и от добавления классов\ИДшников отрисовка\перерасчёт будут сделаны столько же раз, сколько и при приведённом в первом посте примере, ибо в браузерах сейчас всё такое ленивое :) |
var fragment = document.createDocumentFragment(); fragment.appendChild( child1 ); // никаких перерисовок не будет fragment.appendChild( child2 ); // никаких перерисовок не будет fragment.appendChild( child3 ); // никаких перерисовок не будет fragment.appendChild( child4 ); // никаких перерисовок не будет //..................... some code document.body.appendChild( fragment ); // перерисовка будет лишь раз. |
| Часовой пояс GMT +3, время: 17:12. |