使用JavaScript多次附加节点一次

Question

为什么，当我运行此示例代码时，只是一个'a节点'附加到我的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环内。