使用JavaScript多次追加节点只能追加一次

时间:2019-03-15 00:31:40

标签: javascript html html5

为什么当我运行此示例代码时,ul列表中仅附加了一个“ A节点”?每次必须追加时都需要创建一个新节点吗?注意:使用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>

2 个答案:

答案 0 :(得分:5)

这是因为您每次都附加相同的节点-将您的所有代码放在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>

答案 1 :(得分:1)

那是因为您的代码将同一节点追加到列表中。为了创建和附加多个节点,必须确保

let node = document.createElement("LI");let textnode = document.createTextNode("A node");, 和node.appendChild(textnode);

位于您的for循环中。