为何DocumentFragment会忽略部分追加节点？代码执行异常求助

这个问题的核心在于NodeList是动态集合，当你调用appendChild把节点从span移动到文档片段时，该节点会立刻从span.childNodes中被移除，导致遍历过程跳过了中间的<b>节点。

我们来一步步模拟你的代码执行过程：

1. 初始状态：span.childNodes包含3个节点：文本节点"first "、<b>元素、文本节点" third "。
2. 第一次for...of循环：取出第一个节点"first "，用appendChild移到frag里。此时span.childNodes变成只剩2个节点：<b>和" third "。
3. 第二次循环：for...of会遍历NodeList的下一个元素（此时索引为1的节点是" third "），把它移到frag。现在span.childNodes只剩<b>节点。
4. 循环结束：因为NodeList的长度已经从3变成1，遍历完成，<b>节点被留在span中，没有被添加到frag，自然不会出现在页面上。

有两种简单的修复方式：

方法1：将NodeList转为静态数组遍历 #

把动态的childNodes转换成静态数组，这样遍历的是初始节点的副本，不受后续节点移除的影响：

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;
// 用扩展运算符转为数组
for (let node of [...span.childNodes]) {
  frag.appendChild(node);
}
document.body.appendChild(frag);

也可以用Array.from(span.childNodes)替代[...span.childNodes]，效果完全一致。

方法2：用while循环逐个取出第一个节点 #

只要span还有子节点，就把它的第一个子节点移到frag里，这样完全不会受NodeList动态变化的影响：

const html = 'first <b>second</b> third ';
const span = document.createElement('span');
const frag = document.createDocumentFragment();
span.innerHTML = html;
// 循环取出第一个节点直到span为空
while (span.firstChild) {
  frag.appendChild(span.firstChild);
}
document.body.appendChild(frag);

这两种方法都能确保所有子节点（包括<b>）被正确添加到文档片段，最终页面会显示first second third。

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