为什么appendChild()会让一些孩子失踪？

Question

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)

如图所示，文本节点

x

消失了。 如果是

appendChild()

造成了差异，为什么它会以不同的方式对待元素节点和文本节点？

Answer 1

问题出在迭代上。正如 MDN 上所述：

注意：如果给定的子节点是对现有节点的引用 文档，

appendChild()

将其从当前位置移动到 新职位。

通过在

div2.appendChild(child)

节点上调用

<br>

，

childNodes

列表的大小减小为 1，但迭代指针已经移过该元素，因此您的

x

文本节点不会被打印到控制台。

如果您修改了使用

forEach()

循环的数组，您会看到完全相同的行为：

const array = ['x', 'y'];

array.forEach((v) => {
  console.log(v);
  array.splice(0, 1);
});