JavaScript DocumentFragment 插入文档后为什么变成空片段

DocumentFragment 插入文档后变空，是因为插入操作移动的是它的子节点，而不是把片段对象当作一个外层元素挂到页面上。片段对象仍然存在，原来的子节点现在属于目标父节点，不能继续在旧片段里找到它们。

这个行为在重复渲染列表时特别容易被误判成“第二次appendChild失效”。如果第一次已经把子节点移走，第二次插入的就是空片段。生产代码应明确：谁负责构建节点，谁接管节点，以及重复渲染时是否需要新的节点。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

空的是片段的子节点列表

MDN的appendChild文档说明，参数为DocumentFragment时，其内容会进入目标节点的子节点列表，返回值则是已经清空的片段。DOM标准也专门处理片段的children。因此，“返回了fragment”与“fragment内部仍有内容”是两回事。

// 使用独立容器，避免影响页面其他内容；示例按DOM语义说明，未在本文环境执行。
const list = document.createElement("ul");
const fragment = document.createDocumentFragment();
const first = document.createElement("li");
const second = document.createElement("li");
first.textContent = "待入库";
second.textContent = "已复核";
fragment.append(first, second);

// 保存节点引用快照；不要把片段本身当作已挂载元素。
const saved = Array.from(fragment.childNodes);
const returned = list.appendChild(fragment);

console.log(returned === fragment);           // 预期 true：返回空片段对象
console.log(fragment.childNodes.length);      // 预期 0：子节点已移入list
console.log(list.children.length);            // 预期 2
console.log(saved[0] === first);              // 预期 true：节点身份不变
console.log(first.parentNode === list);       // 预期 true：父节点改变
console.log(fragment.parentNode === null);    // 预期 true：片段自身未挂载

这里的first、second始终是同两个li对象。saved是插入前保存的节点引用数组，不是节点副本；它能帮助后续业务直接访问已经挂到list中的元素。list在示例中尚未接入页面，但这不影响片段的移动语义。

重复渲染时重新构建，或在移动前克隆

推荐把构建函数约定为“每次返回新的DocumentFragment”。这样同一份records数据可以服务两个容器，而不会意外把左侧节点搬到右侧。下面用独立列表说明该约定。

// 每次调用返回新的节点集合；数据与可移动的DOM对象分别管理。
function buildRows(records) {
  if (!Array.isArray(records)) {
    throw new TypeError("records 必须是数组");
  }
  const fragment = document.createDocumentFragment();
  for (const record of records) {
    const row = document.createElement("li");
    // 把业务字段作为文本写入，不把外部字符串拼成HTML。
    row.textContent = String(record.label ?? "");
    fragment.appendChild(row);
  }
  return fragment;
}

const records = [{ label: "待入库" }, { label: "已复核" }];
const left = document.createElement("ul");
const right = document.createElement("ul");

// 两次构建，分别挂载；两边共享数据但不共享同一批DOM节点。
left.appendChild(buildRows(records));
right.appendChild(buildRows(records));

buildRows负责构建，调用者负责挂载。这个分工使调用方不必猜测返回的片段是否已经被其他容器消费，也避免把节点对象长久缓存成可重复使用的渲染数据。records是数据来源，textContent是文本写入点，新片段是本次构建的结果，左右容器则各自接管一套节点。

若确实要复制一套现成结构，可以在片段尚未被移动前进行深克隆：

const base = buildRows(records);
// 必须在base仍有子节点时复制；true表示包含后代节点。
const copy = base.cloneNode(true);
left.appendChild(base);
right.appendChild(copy);
// 此时再克隆base只能得到空片段；克隆不是对先前结构的历史恢复。

cloneNode(true)会复制后代结构，但不复制通过addEventListener注册的监听器。克隆还可能带来重复id。需要独立交互时，应重新绑定行为、采用适合的事件委托，并为需要唯一的标识重新分配值；不能把克隆视为完整组件实例的复制。

把数据输入和挂载职责限制在清楚的位置

对于来自接口的展示字段，建议像示例一样使用textContent，而不是为省几行代码直接拼接HTML。这里限定的是纯文本列表场景；若业务必须渲染富文本，应另外设计可信内容处理，不应让“使用了片段”成为字符串可以随意解析的理由。

建议把目标容器作为渲染函数的显式参数，避免在底层工具函数里随意查找并改写页面上的任意列表。构建函数只返回本次新节点，挂载函数只处理指定容器，这种约定比依赖共享fragment变量更容易排查误移动。

需要替换旧列表还是追加新列表，也应由调用方明确。appendChild表示追加；如果已有内容，不能把最终总数量误认为本次新增数量。本文使用新建的空容器，是为了把这个额外因素排除出示例。

日志应记录数量和身份，不记录模糊的对象印象

排查时可以记录挂载前后的childNodes.length、保存节点的parentNode是否等于目标容器，以及返回值是否等于片段。建议打印这些即时求得的布尔值和数字，而不是只展开一个较早打印的对象再凭视觉判断它当时是否为空。

childNodes包含文本等不同节点，children只统计元素。两种统计口径不能混用。示例明确创建两个li，没有格式化HTML带来的空白文本，因而挂载后list.children的预期数量为二。

DocumentFragment也不是权限或事务机制：它不会自动提供输入消毒、业务回滚或跨异步任务的隔离。这里建议的函数职责和记录方式是应用层设计选择，不是片段额外附带的保证。

相关问题

把空片段再次appendChild会报错吗

在目标和参数关系合法的正常场景下，它只是不再添加子节点。若目标类型或树结构不合法，仍可能发生其他DOM异常，不能把所有错误都归因于片段为空。

片段为空后还能继续使用吗

可以再往同一个片段装入新的节点，再执行挂载。需要重复使用的是新内容，而不是指望已经移动的子节点仍留在旧位置。

为什么fragment.querySelector找不到刚插入的元素

成功挂载后，元素已经不在该片段的子树里。改从目标容器查询，或者使用挂载前保存的元素引用。

使用片段就一定比其他写法快吗

不能据此作固定性能承诺。优先保证所有权与渲染职责清晰；是否值得优化，应结合实际页面和工作量判断。

参考：MDN appendChild；MDN cloneNode；WHATWG DOM插入算法。