Question

如何使用JavaScript插入HTML元素两次？</ p>

此代码无效：

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'进行 copy 并将它附加到正文的末尾，它正在移动实际的节点。

所以如果你有两个元素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);  
}

使用JavaScript插入HTML元素两次（或更多次）

3 个答案: