CODEWITHSUNDEEP
javascripthtml
Martlark
Martlark

Reputation: 14581

Appending a node multiple times using JavaScript only appends once

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>

Upvotes: 2

Views: 673

Answers (2)

Isabella
Isabella

Reputation: 404

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.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44135

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>

Upvotes: 6

Related Questions