createcontextualfragment 是 range 对象的方法，用于安全高效解析 html 字符串为 documentfragment，不执行脚本、不触发回流；须通过 document.createrange() 调用，返回未挂载的轻量片段，支持多节点插入。
掌握 createContextualFragment 的关键是理解它不是独立函数，而是 Range 对象的方法，用于安全、高效地将 HTML 字符串解析为可操作的 DOM 节点（通常是 DocumentFragment），且不触发脚本执行或样式重排。
核心用法：创建 Range 并调用 createContextualFragment
该方法必须通过 document.createRange() 创建的 Range 实例调用。传入的 HTML 字符串会被解析为一个轻量级的文档片段，所有节点都处于“就绪但未挂载”状态：
- 先创建 Range：
const range = document.createRange(); - 再解析字符串：
const fragment = range.createContextualFragment(htmlString); - 返回值是
DocumentFragment，可直接遍历子节点或插入目标容器
为什么推荐它？——安全与性能兼顾
相比 innerHTML 或 DOMParser，createContextualFragment 具有明确优势：
- 不执行内联脚本、不加载外部资源（如图片、iframe），天然防 XSS 风险
- 返回的是
DocumentFragment，批量插入时不会引发多次回流（reflow） - 语法简洁，无需创建临时元素或处理
包裹结构 - 支持多行模板字符串，自动忽略首尾空白，兼容现代 JS 写法
常见误用与规避方式
容易出错的地方集中在上下文和节点归属上：
- 不能在任意对象上调用 —— 必须来自
document.createRange()，否则报错TypeError - 生成的节点属于当前文档，但尚未挂载，因此
node.ownerDocument正确，node.parentNode为null - 若 HTML 字符串含多个顶层节点（如
<div>A</div> <p>B</p>），fragment.firstChild只取第一个；应遍历fragment.childNodes或用fragment.append(...)全量插入
完整可用示例
以下代码动态生成并插入一个地铁站卡片，使用 createContextualFragment 安全解析：
const htmlString = `
<article class="station-card"><h3>西直门站</h3>
<p>2号线｜4号线｜13号线</p>
</article>
`;
const range = document.createRange();
const fragment = range.createContextualFragment(htmlString);
// 插入到页面中
const list = document.querySelector('#stations-list');
list.appendChild(fragment); // 自动展开所有子节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
