Присоединение узла несколько раз с использованием JavaScript добавляется только один раз

Question

Почему, когда я запускаю этот пример кода, только один «узел» добавляется в мой список ul? Нужно ли создавать новый узел каждый раз, когда мне нужно добавить? Примечание. Использование 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 петли.