DocumentFragment 是轻量级离线容器，可批量添加子节点后一次性挂载：先用 createDocumentFragment() 创建，再用 appendChild 逐个添加节点，最后将 fragment 插入目标元素，此时其子节点移入父元素，fragment 自身为空且不显示。
用 appendChild 插入文档碎片（DocumentFragment）时，关键在于：**fragment 本身不能被直接显示，但可以作为“容器”批量添加子节点，再用 appendChild 一次性挂载到页面中——此时 fragment 内的所有子节点会脱离 fragment、移入目标父元素，而 fragment 自身保持空且不可见。**
创建并填充 DocumentFragment
先用 document.createDocumentFragment() 创建一个轻量级的离线节点容器，然后像操作普通父元素一样，往里面动态添加子节点（如 li、div 等）：
- 推荐用循环 +
document.createElement构建多个节点 - 每个新节点必须用
fragment.appendChild(节点)添加进去（不能用innerHTML直接赋值，因为 fragment 没有innerHTML属性）
用 appendChild 把整个 fragment 插入目标位置
选中页面中的某个真实父元素（比如 ul 或 div#list），调用它的 appendChild 方法，传入 fragment 对象：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 执行后，fragment 中所有子节点会“搬家”到该父元素末尾
- fragment 自身不会出现在 DOM 中，也不会保留在页面里
- 这一步是真正的“一次性插入”，只触发一次重排（reflow），性能优于逐个
appendChild
完整示例代码
假设要向 <ul id="list"></ul> 中添加 5 个列表项：
立即学习“Java免费学习笔记（深入）”；
const fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
const li = document.createElement('li');
li.textContent = `第 ${i + 1} 项`;
fragment.appendChild(li); // 往 fragment 里加
}
const ul = document.getElementById('list');
ul.appendChild(fragment); // 一次性插入 ul 中
注意事项
- fragment 只能被插入一次；再次调用
appendChild(fragment)不会报错，但什么也不会发生（因为 fragment 已空） - 如果需要多次使用，每次都要重新创建新的 fragment
- 不支持
fragment.innerHTML = '...'，想用字符串模板可先创建临时div，再把它的childNodes移入 fragment
