使用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循环内。