为何使用appendChild()会导致部分子节点丢失？

问题重现代码 #

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()对元素节点和文本节点的处理方式不同？

核心原因：实时NodeList的遍历陷阱 #

根本问题不是appendChild()区别对待元素节点和文本节点，而是div1.childNodes返回的是实时的NodeList集合——当你把节点从div1移到div2时，div1的子节点列表会立刻更新，导致forEach遍历跳过了文本节点。

具体过程：

1. 初始时div1.childNodes包含两个节点：<br>元素节点（索引0）、文本节点x（索引1）
2. forEach开始遍历第一个节点（<br>），执行appendChild()把它移到div2，此时div1的子节点列表实时缩短，只剩文本节点x，且它的索引变成了0
3. forEach的遍历指针已经走到了索引1的位置，但此时集合里已经没有索引1的元素，遍历直接结束，文本节点x根本没被处理

验证与解决方法 #

如果把实时的NodeList转成静态数组，再遍历就能拿到所有节点：

const div1 = document.createElement('div'),
    div2 = document.createElement('div')
div1.innerHTML = '<br>x'
// 转成静态数组，避免实时更新影响遍历
Array.from(div1.childNodes).forEach(child => {
    console.log('child:', child)
    div2.appendChild(child)
})
// 此时输出 <br>x
console.log(div2.innerHTML)

appendChild()对所有节点的处理逻辑是一致的：把节点从原父节点移除，添加到新父节点。之所以出现差异，完全是遍历过程中实时集合变化导致的遗漏。

内容的提问来源于stack exchange，提问作者kakakali