使用JavaScript多次追加节点只能追加一次

Question

Why, when I run this sample code, is only one 'A node' appended to my ul list? Do I need to create a new node each time I have to append? Note: Using appendNode(node.cloneNode(true)) does append many times.

 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

It's because you're appending the same node each time - place all your code inside the for loop and it works:

 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> 

Alternatively, use 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

That's because your code is appending the same node to your list. In order to create and append multiple nodes, you have to make sure that

let node = document.createElement("LI"); , let textnode = document.createTextNode("A node"); , and node.appendChild(textnode);

are inside your for loop.