使用JavaScript插入HTML元素两次(或更多次)

Question

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

此代码无效:

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';在添加节点后尝试 - 文本将更新而无需再次追加.