createContextualFragment 是 Range 的方法，用于将 HTML 字符串安全解析为 DocumentFragment；它比 innerHTML 更可控、比 createElement 更简洁，避免重排重绘和 XSS 风险，且需配合 Range 使用，支持上下文敏感解析。
createContextualFragment 是 Range 对象的一个方法，它能把 HTML 字符串安全、高效地解析为文档片段（DocumentFragment），再插入到 DOM 中。它比 innerHTML 更可控，又比手动 createElement + appendChild 更简洁，特别适合动态渲染结构较复杂的 HTML 片段。
为什么用 createContextualFragment 而不是 innerHTML？
直接设置 element.innerHTML = htmlString 会清空原有子节点并重新解析整个内容，可能触发多次重排重绘，还存在 XSS 风险（若 HTML 来源不可信）。而 createContextualFragment 只生成节点碎片，不自动挂载，由你决定插入时机和位置，更灵活也更安全。
基本用法：三步走
要使用它，必须先获得一个有效的 Range 实例——最常用方式是基于目标容器创建：
- 选中目标元素的“上下文”（比如它的第一个子节点前，或自身末尾）
- 调用
range.createContextualFragment(html) - 用
appendChild或insertBefore把返回的 DocumentFragment 插入 DOM
示例：
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById('list');
const range = document.createRange();
range.selectNodeContents(container); // 或 range.setStartAfter(container.lastChild)
const fragment = range.createContextualFragment('<li>新项</li><li>另一项</li>');
container.appendChild(fragment); // 一次插入多个节点，无重排开销
更实用的封装写法
为避免每次手动创建 Range，可封装成通用函数：
function htmlToFragment(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content;
}
// 或兼容老浏览器（IE10+）用 Range 方式：
function htmlToFragmentLegacy(html) {
const range = document.createRange();
range.selectNode(document.body);
return range.createContextualFragment(html);
}
注意：<template> 是现代推荐方式（更轻量、无副作用），但 createContextualFragment 在某些需要模拟特定父上下文（如表格内必须有 <tr>）时仍有价值。
注意事项与边界情况
- 传入的 HTML 字符串必须是“上下文合法”的——比如不能单独传
<td>xxx</td>，得包裹在<tr><td>xxx</td></tr>中，否则解析可能失败或被浏览器修正 - 脚本标签（<script>）不会执行，样式标签（<style>）会生效，但需确保插入后文档处于活跃状态
- 返回的是
DocumentFragment，不是数组，不能直接用forEach；需用fragment.children或[...fragment.childNodes]转换
