javascript - appendChild while inside for loop 不能正常工作

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);
}

编辑:

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