使用JavaScript多次追加節點只能追加一次

Question

為什么當我運行此示例代碼時，ul列表中僅附加了一個“ A節點”？ 每次必須追加時都需要創建一個新節點嗎？ 注意：使用appendNode(node.cloneNode(true))確實會多次追加。

 let node = document.createElement("LI"); let textnode = document.createTextNode("A node"); node.appendChild(textnode); for (let x = 0; x < 5; x++) { document.getElementById("myList").appendChild(node); } 

 <ul id="myList"> </ul> 

Answer 1

這是因為您每次都附加相同的節點-將您的所有代碼放入for循環中，即可正常工作：

 for (let x = 0; x < 5; x++) { let node = document.createElement("LI"); let textnode = document.createTextNode("A node"); node.appendChild(textnode); document.getElementById("myList").appendChild(node); } 

 <ul id="myList"> </ul> 

或者，使用cloneNode ：

 let node = document.createElement("LI"); let textnode = document.createTextNode("A node"); node.appendChild(textnode); for (let x = 0; x < 5; x++) { document.getElementById("myList").appendChild(node.cloneNode(true)); } 

 <ul id="myList"> </ul> 

Answer 2

那是因為您的代碼會將相同的節點追加到列表中。 為了創建和附加多個節點，您必須確保

let node = document.createElement("LI"); ， let textnode = document.createTextNode("A node"); ，以及node.appendChild(textnode);

在您的for循環內。