推荐使用template标签将HTML字符串转为DOM元素，因其原生支持、速度快且能正确处理特殊标签；其次可选DOMParser或临时容器法，但需注意安全性，避免XSS攻击。
在JavaScript中，将HTML字符串转换为DOM元素是一个常见需求，比如动态插入内容、模板渲染或富文本处理。直接使用innerHTML虽然简单，但存在安全和性能问题。以下是几种安全且高效的方法。
1. 使用 DOMParser 解析 HTML 字符串
DOMParser 是一个强大的内置对象，可以将字符串解析为完整的 DOM 文档或片段。
适用于需要解析包含完整结构（如 ）的字符串场景。
const htmlString = '<div class="box"><p>Hello World</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div>'; const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); const element = doc.body.firstChild; // 获取解析后的 DOM 元素
优点：标准API，支持完整HTML语法。缺点：创建了整个文档结构，稍显重量。
2. 利用 template 标签解析
这是目前推荐的方式，利用 <template></template> 元素的特性：内容不会立即渲染，但可被解析为有效DOM。
function htmlToElement(html) {
const template = document.createElement('template');
template.innerHTML = html.trim(); // 去除首尾空格避免解析异常
return template.content.firstElementChild;
}
// 使用示例
const el = htmlToElement('<span>This is a span</span>');
document.body.appendChild(el);
优势：原生支持，速度快，能正确处理大多数HTML标签（如 table、li 等特殊上下文元素）。
3. 创建临时容器插入 innerHTML
传统方法，通过创建一个临时的父元素，设置其 innerHTML 来获取子节点。
function htmlToElement(html) {
const div = document.createElement('div');
div.innerHTML = html.trim();
return div.firstElementChild;
}
注意：某些标签如 <tr>、<code><td> 在非表格上下文中可能无法正确解析，需包裹在对应结构中：
<font color="#000000">
<pre class='brush:php;toolbar:false;'>function htmlToTableRow(html) {
const table = document.createElement('table');
table.innerHTML = html; // 如 '<tr><td>data</td></tr>'
return table.rows[0];
}
</pre>
</font>
<h3><strong>4. 安全性注意事项</strong></h3>
<p>无论哪种方式，若HTML字符串来自用户输入，务必进行转义或使用可信来源，防止XSS攻击。</p>
<p>避免执行内联脚本：</p>
<font color="#000000">
<ul>
<li>不要解析含有 <code><script></script> 标签的不可信内容
textContent 而非 innerHTML 插入纯文本基本上就这些。对于大多数情况，推荐使用 <template></template> 方法，简洁高效又安全。
