[SOLVED] Javascript For loop appends same element once

Javascript For loop appends same element once

This is to understand the logic of JS Loop. In the following code i expect that the <li> element will append 3 times inside the <ul> tag. So that i should get 3 <li> tag inside the <ul> tag. As per my understanding any actions inside the loop will work based on the condition. As per that I should get 3 blank <li> tag here. But i get only 1. Anyone can explain whats wrong on my approach and how should i need to write it. Thanks in Advance!

let ul = document.querySelector("ul");
let li = document.createElement("li");
for (i = 0; i <=3; i++) {
  ul.appendChild(li);
}

Solution

You need to create a new element each time. If you are appending the same element multiple times, it will move it in the DOM, but not clone it.

One simple solution is use cloneNode:

let node = document.createTextNode("😀")
for (i = 0; i <3; i++) 
  document.body.appendChild( node.cloneNode() )

Note:

Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using