使用JavaScript多次插入HTML元素

Question

如何使用JavaScript将HTML元素插入两次？

这段代码没有起作用：

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

Test: http://jsfiddle.net/9z82D/

- Tyilo

Answer 1

好的，我发现你只需要使用cloneNode：

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

- Tyilo

Answer 2

为了说明你的答案，appendChild不会创建一个你的元素'div'的副本并将其附加到body的末尾，而是移动实际节点。

所以如果你有两个元素，div和div2，然后你这样做：

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

div被插入到body的末尾，然后是div2，接着div从顶部移动到底部。(请参见http://jsfiddle.net/9z82D/3/)

这很有帮助，因为你在将div附加到后面之后对其进行的任何更改都会在对象div中反映出来。如果不是这样的话，您必须再次使用getElementsByTagName重新捕获元素，然后才能进行其他更改。

例如，在附加节点后尝试div.innerText='goodbye';--文本将更新，而无需再次附加。

- Jeff

---

很好的澄清。这种行为远非显而易见，一个名为“appendChild”的函数竟然也有从其先前位置移除子节点的能力，真是令人惊讶。大多数人不会认为多次附加节点与多次将对象推入数组有任何区别。但在js中，节点显然是非常特殊的。 - Drkawashima

Answer 3

不必克隆和创建多个变量，您可以使用循环:

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

- jk.