为什么当我运行此示例代码时,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>
答案 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
循环中。