DocumentFragment.moveBefore 怎样移动已有节点而不创建副本

在支持该方法的浏览器中，调用fragment.moveBefore(已有节点, 参考节点)，可以调整节点在片段中的位置而不创建副本。第二个参数传null表示移到末尾。我的取舍是：先确认节点所属的根和实际状态需求，再决定采用它，不能把它当成任意跨容器搬运接口。

API参考：https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/moveBefore

先在同一个片段内部调整顺序

下面用三个span表示待装配内容，把丙移到甲前面。三个节点已经属于同一个片段，参考节点也是它的直接子节点。示例为静态讲解，未在本机执行。

// 创建脱离文档的片段及其已有子节点
const fragment = document.createDocumentFragment();
const a = document.createElement("span");
const b = document.createElement("span");
const c = document.createElement("span");
a.textContent = "甲";
b.textContent = "乙";
c.textContent = "丙";
fragment.append(a, b, c);
const original = c;
// 功能检测；这里只需调整普通span顺序
if (typeof fragment.moveBefore === "function") {
  fragment.moveBefore(c, a);
} else {
  fragment.insertBefore(c, a);
}
// 预期顺序丙甲乙，c仍是原对象
console.log(fragment.textContent, fragment.firstChild === original);

我会把根边界放在调用前面考虑

moveBefore要求移动节点与目标具有相同的shadow-including root。普通脱离片段场景可用于它内部已有节点的调整，不能直接把页面上的已连接节点移入这个片段。参考节点必须是调用片段的子节点，否则可能抛出NotFoundError；跨根则涉及HierarchyRequestError。

保留状态和保留对象不是同一件事

insertBefore移动已有节点同样不是克隆。moveBefore的区别在于避免传统移除再插入造成的部分状态重置。普通DocumentFragment本身不连接到页面，因此状态保留在已连接ShadowRoot上更有意义；ShadowRoot继承DocumentFragment。

把片段插入文档会转移其子节点并清空片段，而不是把片段本身变成页面容器。若程序还要继续移动这些节点，不能沿用“仍属于旧片段”的假设。

采用时保留明确的降级目标

MDN将此能力标为有限可用。我会把“只需顺序正确”与“必须保留焦点等状态”分开：前者可像上例降级到insertBefore，后者需重新设计交互，不能宣称降级语义完全相同。也不要捕获所有异常后静默换方法，掩盖跨根和参考节点错误。

返回值是移动后的节点吗？

不是，返回undefined。需要继续访问时保留原变量。

怎样移到最后？

把第二个参数明确传null；不要省略。与传入参考节点相比，它表达的是追加到子节点末尾。