appendChild雖然裏面for循環不能正常工作

我想創建一個DIV並將其附加到頁面上的所有現有的DIV與for循環。問題在於它在for循環中，它只會將新的DIV添加到最後找到的DIV中，而不是像FOR循環那樣將每個DIV添加到DIV中。有人可以告訴我我做錯了什麼嗎？appendChild雖然裏面for循環不能正常工作

這裏是我的工作代碼：

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的看，他們看起來是正確的事情，所以我有點困惑，爲什麼會發生這種情況。謝謝！

來源

2015-06-22 SS113

這將是微不足道的與jQuery附加方法http://api.jquery.com/append/ –

您必須創建多個元素，因爲您無法將同一元素附加到一個文檔兩次。這意味着您的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()。

來源

2015-06-22 01:08:49 reg4in

感謝您的答案！它修復了它，現在它變得更有意義了！關於引號，我應該使用「或」還是無關緊要？我知道我一直在使用它們，但我希望以正確的方式使用它們。 – SS113

它們在Javascript中完全相同（！），我的個人偏好是'''，但這只是我在代碼中的「品味」，而且我選擇https://github.com/feross/standard作爲我的編碼風格，並且它也使用單引號。感謝您的反饋:) – reg4in

這是正確的行爲。

原因是MDN文檔的第二句。第一次添加後，您提供的孩子是對現有節點的引用，然後移動而不是複製。

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

的Node.appendChild（）方法增加了一個節點到指定的父節點的孩子的列表的末尾。如果給定的孩子是對文檔中現有節點的引用，appendChild（）將其從其當前位置移動到新位置（即，不需要在將節點附加到其他節點之前從其父節點移除節點）。

來源

2015-06-22 01:12:33 Paul

感謝您的參考！ – SS113

appendChild雖然裏面for循環不能正常工作

回答

相關問題