Question

我正在尝试创建一个DIV，并使用for循环将其附加到页面上的所有现有DIV。问题是当它在for循环中时，它会将新DIV仅添加到最后找到的DIV中，而不是像FOR循环那样将它添加到每个DIV中。谁能告诉我我做错了什么？

以下是与我合作的代码：

HTML：

<div class="Id">
<div class="first">First</div>
</div>

<div class="Id">
<div class="first">First</div>
</div>

<div class="Id">
<div class="first">First</div>
</div>

<div class="Id">
<div class="first">First</div>
</div>

JS：

var secondDiv, secondDivImg, selectDivContainer;

secondDivImg = document.createElement("span");
secondDivImg.className = "divImg";

secondDiv = document.createElement("div");
secondDiv.className = 'second';
secondDiv.innerHTML = "Second";
secondDiv.appendChild(secondDivImg);

selectDivContainer  = document.querySelectorAll('.Id');

var idLength = document.querySelectorAll('.Id').length;

for (var i=0; i<idLength; i++) {

    selectDivContainer[i].appendChild(secondDiv);
    console.log(i);
    console.log(selectDivContainer[i]);

}

这里是fiddle

我添加了几个console.log来查看它们看起来是正确的，所以我有点困惑为什么会发生这种情况。谢谢！

Answer 1

您必须创建多个元素，因为您无法将同一元素附加到一个文档两次。这意味着您的document.createElement()调用必须在循环内。

var selectDivContainer = document.querySelectorAll('.Id');
var idLength = selectDivContainer.length;

var secondDiv, secondDivImg;

for (var i = 0; i < idLength; i++) {
    secondDivImg = document.createElement("span");
    secondDivImg.className = "divImg";

    secondDiv = document.createElement("div");
    secondDiv.className = "second";
    secondDiv.innerHTML = "Second";
    secondDiv.appendChild(secondDivImg);

    selectDivContainer[i].appendChild(secondDiv);
}

修改

另外，您可能已经注意到我更改了代码的某些部分;例如，你应该引用一致;除非必要，否则不要使用" AND '（它们在JS中是相同的）。此外，对于idLength，您不必再次致电document.querySelectorAll()。

Answer 2

这是正确的行为。

原因是 MDN文档的第二句。在第一次添加它之后，您提供的子项是对现有节点的引用，然后被移动而不是复制。

来自https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Node.appendChild（）方法将节点添加到指定父节点的子节点列表的末尾。如果给定子节点是对文档中现有节点的引用，则appendChild（）将其从当前位置移动到新位置（即，在将节点附加到其他节点之前不需要从其父节点中删除该节点）

在for循环中，appendChild不能正常工作

2 个答案: