Вставьте HTML-элемент два (или более) раза, используя JavaScript

Question

Как дважды вставить элемент HTML с помощью JavaScript?

Этот код не работает:

var div = document.createElement('div');
div.innerText = 'Hello!';
document.body.appendChild(div);
document.body.appendChild(div);

Тест: http://jsfiddle.net/9z82D/

Answer 1

Хорошо, я обнаружил, что вам просто нужно использовать cloneNode:

var div = document.createElement('div');
div.innerText = 'Hello!';
document.body.appendChild(div);
var div2 = div.cloneNode(true);
document.body.appendChild(div2);

Answer 2

Чтобы уточнить ваш ответ, appendChild не создает копию вашего элемента 'div' и не добавляет его в конец тела, а перемещает реальный узел.

Так что, если у вас есть два элемента, div и div2, и вы делаете:

document.body.appendChild(div);
document.body.appendChild(div2);
document.body.appendChild(div);

div вставляется в конец тела, затем div2, затем div перемещается сверху вниз. (см. http://jsfiddle.net/9z82D/3/)

Это полезно, потому что любые изменения, которые вы вносите в div после добавления, все еще отражаются в объекте div. Если бы это было не так, вам пришлось бы сделать дополнительный getElementsByTagName для повторного захвата элемента перед внесением любых других изменений.

Например, попробуйте div.innerText='goodbye'; после добавления узла - текст обновится без добавления снова.

Answer 3

Вместо клонирования и создания нескольких переменных вы можете просто зациклить его:

for(i=0;i<2;i++)
 {
  var div = document.createElement('div');
  div.innerText = 'Hello!';
  document.body.appendChild(div);  
}