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

[Yes]

Как правильнее создавать\добавлять элементы в структуре 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);

[Dim@]

Yes,
1 - вариант правильней

[Deff]

Yes,
1-й
Поскольку при втором, могут пропадать события , уже установленные внутри элемента

[Yes]

Большое спасибо, за ответ и пояснение)

[bes]

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

[melky]

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

можно даже так - ибо appendChild возвратит добавленный элемент

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

и от добавления классов\ИДшников отрисовка\перерасчёт будут сделаны столько же раз, сколько и при приведённом в первом посте примере, ибо в браузерах сейчас всё такое ленивое

[devote]

var fragment = document.createDocumentFragment();

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

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

document.body.appendChild( fragment ); // перерисовка будет лишь раз.