documentfragment 是浏览器专为批量 dom 操作设计的轻量级中转节点，不渲染、不挂载、不触发重排，仅用于暂存并一次性插入子节点。
DocumentFragment 不是“用来做某件事的工具”，而是浏览器原生提供的、**专为批量 DOM 操作设计的轻量级中转节点**。它本身不渲染、不挂载、不触发重排，但能让你把一堆节点先“攒起来”，再一次性塞进真实 DOM —— 这才是它不可替代的核心价值。
document.createDocumentFragment() 创建空片段最安全
这是唯一标准、无歧义、全浏览器兼容的创建方式。别用 new DocumentFragment()（不合法）、也别试图手动 new 一个节点去模拟它（行为不一致）。
- 返回值永远是
nodeType === 11的纯片段对象，parentNode恒为null - 它不占位、不触发 layout，往里
appendChild()任何元素，原始 DOM 中对应节点会**自动被移走**（不是复制） - 如果误把
document.body.appendChild(fragment)当成“插入 fragment 本身”，结果是空操作 —— 因为 fragment 不会被挂载，只有它的子节点被转移过去
往 DocumentFragment 里塞节点时，注意 parentNode 变化
常见错误：循环创建 li 后直接 fragment.appendChild(li)，接着又想对 li 做二次操作（比如加 class），却发现 li.parentNode 已变成 fragment，不再是 document 或某个容器。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有追加到 fragment 的节点，其
parentNode会立即更新为该 fragment，且脱离原位置（如果原本在 DOM 中） - 若需保留原始引用或后续复用，要么先
cloneNode(true)，要么在追加前完成全部属性/事件设置 - 不要在 fragment 上调用
querySelector—— 它不支持，得用fragment.children或遍历fragment.childNodes
insertAdjacentHTML + DocumentFragment 组合更可控
单纯用 innerHTML 写入字符串快，但有 XSS 风险、不触发自定义元素升级、且无法精细控制事件绑定时机；而 insertAdjacentHTML 是字符串插入，不涉及 fragment。真正需要的是：**把 HTML 字符串转成真实节点，再进 fragment**。
- 推荐路径：
DOMParser→parseFromString(html, 'text/html')→ 提取doc.body.children→ 逐个appendChild到 fragment - 简写替代：
template标签 +content.cloneNode(true)，比DOMParser更轻、更语义化，适合预置结构 - 千万别用
fragment.innerHTML = htmlString——DocumentFragment没有innerHTML属性，会静默失败
append(fragment) 和 appendChild(fragment) 行为完全一致
现代 DOM API 中，append() 和 appendChild() 在传入 DocumentFragment 时效果相同：都是把 fragment 的所有子节点“平铺”插入，fragment 自身不落地。但细节差异容易踩坑：
-
append()支持多个参数（可同时插节点 + 字符串 + fragment），appendChild()只接受单个 Node -
append()会把字符串转成Text节点，appendChild()对字符串直接报错TypeError: Invalid argument - 如果 fragment 是空的（
fragment.childElementCount === 0），两次调用都无副作用，不会报错也不会卡住
真正关键的不是“怎么创建”，而是理解 DocumentFragment 的存在意义：它是一个**临时寄存器，不是容器，也不是代理**。一旦你把它当成“可以反复读写的 DOM 子集”，就很容易在节点归属、事件绑定时机、样式计算时机上出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
