使用JavaScript插入HTML元素两次(或两次以上）

Insert HTML element two (or more) times using JavaScript

本文关键字：两次 JavaScript 插入 使用 HTML 元素      更新时间：2023-09-26

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

此代码不起作用：

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

测试：http://jsfiddle.net/9z82D/

好的，我发现你只需要使用克隆节点：

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

为了详细说明您的答案，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所做的任何更改仍然反映在对象div中。如果不是这样，则在进行任何其他更改之前，您必须执行额外的getElementsByTagName以重新获取元素。

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

与其克隆和创建多个变量，不如循环它：

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