提问人：kakakali 提问时间：9/15/2023 更新时间：9/15/2023 访问量：20
为什么 appendChild（） 会让一些孩子丢失？
Why appendChild() makes some child missing?
问：
const div1 = document.createElement('div'),
div2 = document.createElement('div')
div1.innerHTML = '<br>x'
div1.childNodes.forEach(child => {
// text node x is missing
console.log('child:', child)
// magic line here
div2.appendChild(child)
})
// finally, only <br> is seen
console.log(div2.innerHTML)如上所述，文本节点不见了。
如果这是有区别的，为什么它以不同的方式对待元素节点和文本节点？xappendChild()
答：
1赞
Robby Cornelissen
9/15/2023
#1
问题在于迭代，或者更具体地说，在于您在迭代节点列表时修改了节点列表。
正如 MDN 所指出的：
注意：如果给定的子节点是对 文档，将其从当前位置移动到 新职位。
appendChild()
在第一次迭代中，通过调用节点，可以有效地从中删除此节点，并将列表的大小减少到 1（仅包含文本节点）。但是，迭代指针已移过第一个元素，因此文本节点不会打印到控制台。div2.appendChild(child)<br>div1div1.childNodesxx
如果你修改了一个你正在循环的数组，你会看到完全相同的行为：forEach()
const array = ['<br>', 'x'];
array.forEach((v) => {
console.log(v);
array.splice(0, 1);
});
评论