DocumentFragment插入父元素后如何对其进行子节点增删操作？

问题根因 #

DocumentFragment 是专为临时批量DOM操作设计的轻量节点，本身不属于真实DOM树，核心特性决定了你当前的用法不可行：
当执行parent.appendChild(container)时，浏览器只会将container内的所有子节点迁移到parent下，container自身不会被插入DOM树，且操作完成后container会自动清空，和parent不再有任何关联。后续你对空container做的增删操作都只会作用在脱离DOM的空容器上，自然不会触发渲染，也不会影响parent的内容。

解决方案 #

方案1：DocumentFragment标准用法（适合一次性批量插入） #

如果你的需求是批量插入子节点减少重绘，只需把所有子节点操作放在插入DocumentFragment到父节点之前执行即可：

const parent = document.createElement('div');
const container = document.createDocumentFragment();

// 所有子元素操作先在fragment上完成，全程不会触发重绘
const child = document.createElement('p');
container.appendChild(child);

// 最后一次性插入到父节点，仅触发一次重绘
parent.appendChild(container);
// 此时parent内容为 <div><p></p></div>，container已自动清空

该方案仅支持一次性批量操作，不适合需要后续动态增删子元素的场景。

方案2：持久化插入点位（支持动态增删，满足透明父级需求） #

如果需要长期维护插入点位，且动态增删的子元素自动成为parent的直接子节点（可被parent > *这类CSS选择器直接匹配），可以用Range API实现：

const parent = document.createElement('div');
// 创建Range定位到parent的内容末尾作为固定插入点位
const insertPoint = document.createRange();
insertPoint.selectNodeContents(parent);
insertPoint.collapse(false);

// 插入子元素
const child = document.createElement('p');
insertPoint.insertNode(child);
// 此时parent内容为 <div><p></p></div>，p是parent的直接子元素

// 移除子元素
parent.removeChild(child);
// 此时parent内容为 <div></div>

你可以通过调整Range的定位参数，将插入点位设置在父节点的任意位置，完全满足动态操作的需求。

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