在for循環內的appendChild不能正常工作

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

}

這是一個小提琴

我添加了幾個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（）將其從當前位置移動到新位置（即，在將節點附加到其他節點之前不需要從其父節點中刪除該節點） 。