在前端开发过程中，我们经常会遇到需要把HTML格式的字符串转换成可操作的DOM节点的情况，比如处理后端返回的富文本数据、动态生成页面组件等。直接操作innerHTML虽然简单，但存在安全风险，也不利于后续对节点的精细化处理，因此掌握安全可靠的解析方法很有必要。
方法一：使用DOMParser解析
DOMParser是浏览器原生提供的解析接口，支持将HTML或XML字符串解析为完整的DOM文档，安全性较高，解析后的节点可以直接插入到页面中。
// 待解析的HTML字符串 const htmlStr = '<div class="box"><p>这是解析后的内容</p></div>'; // 创建DOMParser实例 const parser = new DOMParser(); // 解析HTML字符串，得到document对象 const doc = parser.parseFromString(htmlStr, 'text/html'); // 获取解析后的根节点，这里取body下的第一个子节点 const domNode = doc.body.firstChild; // 插入到页面中 document.body.appendChild(domNode);
这种方法的优点是兼容性好，支持所有现代浏览器，解析后的节点结构完整，适合处理复杂的HTML字符串。缺点是如果字符串中包含script标签，默认情况下script不会执行，符合安全预期。
方法二：利用template标签特性
HTML5新增的<template>标签本身不会渲染内容，其内部的HTML会被解析为文档片段，我们可以利用这个特性来转换HTML字符串。
// 待解析的HTML字符串
const htmlStr = '<ul><li>选项一</li><li>选项二</li></ul>';
// 创建template元素
const template = document.createElement('template');
// 设置template的innerHTML，浏览器会自动解析内容
template.innerHTML = htmlStr;
// 获取解析后的文档片段，content属性就是解析后的节点集合
const fragment = template.content;
// 插入到页面中
document.body.appendChild(fragment);
这种方法的优势是解析速度快，而且<template>标签内部的HTML解析规则和普通DOM一致，同时不会立即执行脚本，安全性有保障。适合需要快速解析简单HTML片段的场景。
方法三：createContextualFragment方法
Range对象的createContextualFragment方法可以直接将HTML字符串转换为文档片段，该方法是DOM规范的一部分，原生支持无需额外兼容处理。
// 待解析的HTML字符串 const htmlStr = '<span class="text">上下文片段内容</span>'; // 创建Range对象 const range = document.createRange(); // 设置Range的起始位置，这里选择body元素作为上下文 range.selectNodeContents(document.body); // 解析HTML字符串为文档片段 const fragment = range.createContextualFragment(htmlStr); // 插入到页面中 document.body.appendChild(fragment);
这种方法的解析结果也是文档片段，插入页面时只会插入片段内的节点，不会额外添加外层容器。适合需要在指定上下文位置插入解析后节点的场景。
方法四：createDocumentFragment配合innerHTML
通过创建文档片段，再给片段设置innerHTML来解析HTML字符串，最后将片段插入页面，这种方式也能避免直接操作页面根节点的innerHTML带来的风险。
// 待解析的HTML字符串
const htmlStr = '<div class="card"><h3>卡片标题</h3><p>卡片内容</p></div>';
// 创建文档片段
const fragment = document.createDocumentFragment();
// 创建临时容器用于解析
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlStr;
// 将临时容器内的所有子节点转移到文档片段中
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
// 插入到页面中
document.body.appendChild(fragment);
这种方法的兼容性非常好，几乎所有浏览器都支持，缺点是多了一个临时容器的创建步骤，不过性能影响可以忽略。适合需要兼容老旧浏览器的场景。
四种方法对比
我们可以通过下表快速了解四种方法的特性，方便选择：
| 方法 | 兼容性 | 安全性 | 适用场景 |
|---|---|---|---|
| DOMParser | 现代浏览器全支持 | 高，不执行脚本 | 复杂HTML字符串解析 |
| template标签 | IE不支持，其他现代浏览器支持 | 高，不执行脚本 | 简单HTML片段快速解析 |
| createContextualFragment | 现代浏览器全支持 | 高，不执行脚本 | 指定上下文插入节点 |
| createDocumentFragment配合innerHTML | 全浏览器支持 | 高，不执行脚本 | 需要兼容老旧浏览器 |
注意事项
- 所有解析方法都不会执行HTML字符串中的script标签内容，这是浏览器的安全机制，无需额外处理。
- 如果HTML字符串中包含用户输入的内容，即使使用上述方法，也需要先对特殊字符做转义处理，避免存储型XSS风险。
- 解析后的节点如果不需要立即插入页面，可以保存在变量中后续使用，避免重复解析消耗性能。
JavaScriptDOM解析HTML字符串createDocumentFragmenttemplate标签修改时间：2026-07-05 17:21:26