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刚刚指出的时候创建循环内的按钮，因为我即将点击提交。

Answer 2

归结为页面的结构。 HTML页面由Document Object Model表示。这是Tree Structure。

在树结构中，节点可以有子节点。允许节点同时位于两个位置会将DOM从树更改为Directed Acyclic Graph。如果一个节点是另一个节点的祖先，它作为自己的子节点出现，那将使它成为一个带循环的图形（即循环）。

这与HTML的结构不匹配。

如果您希望在文档中出现两次，则必须在文档对象模型中出现两次。即使两个对象看起来是同一个对象两次，它们实际上是两个不同但相同的对象。

Answer 3

buttonElement的实例只存在一次，您必须重新创建它（或克隆初始的那个，如@Brian所建议的），以便多次放置它。幸运的是，您已经遍历您的节点列表，因此您可以利用它来为每个实例创建一个新按钮：

var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');

for(var i = 0; i< elements.length; i++) {
    var buttonElement = document.createElement("Button");
    var t0 = document.createTextNode("CLICK ME");
    buttonElement.appendChild(t0);
    document.body.insertBefore(buttonElement, elements[i]);
}

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

3 个答案: