为什么不能在文档中的两个不同位置插入相同的节点？

Question

我试图在文档中插入一个按钮节点,但由于某些原因,它不会插入两个地方.

代码如下:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{

      document.body.insertBefore(buttonElement, elements[i]);
}

在我的代码中,有两个匹配的元素querySelectorAll.但我的按钮只插入第二个元素.如果我使用两个不同的按钮实例,它可以工作 我想知道为什么按钮实例不会插入两个地方？

Answer 1

由于您buttonElement是对同一对象的引用,因此您需要在添加它之前克隆它:

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{
    var btnClone = buttonElement.clone(true);
    document.body.insertBefore(btnClone, elements[i]);
}

或者在@Roberrrt刚刚指出的时候在循环中创建按钮,因为我即将点击提交.