HTML字符串需解析为DOM节点才能使用，推荐DOMParser（安全标准）或template+innerHTML（轻量兼容），避免XSS、结构丢失及直接操作字符串的错误。
HTML 字符串不是 DOM 节点，直接传给 appendChild 或 insertAdjacentElement 会报错。关键在于“解析”而非“传递”——必须让浏览器把字符串真正变成可操作的节点对象，同时避开 XSS 风险和结构丢失问题。
用 DOMParser 解析（最标准、最安全）
它专为解析设计，返回完整 Document 对象，支持完整 HTML 语法（包括多层嵌套、无父元素的片段），且不执行脚本、不加载资源，天然防 XSS。
- 对单个根元素（如
<div>...</div>）：用doc.body?.firstChild或doc.querySelector('your-selector') - 对多个同级元素（如
<span>A</span><span>B</span>）：用doc.body?.childNodes并转为数组，再过滤出元素节点（nodeType === 1） - 示例：
const doc = new DOMParser().parseFromString(htmlStr, 'text/html');<br>const node = doc.body.firstChild;
用 template + innerHTML（轻量、兼容好）
比 div.innerHTML 更干净：template 元素天生不渲染、不执行脚本，且 content 属性直接提供 DocumentFragment，避免父容器干扰。
- 适合模板化卡片、列表项等结构明确的片段
- 务必调用
.trim()防止换行导致空文本节点被误取 - 示例：
const t = document.createElement('template');<br>t.innerHTML = htmlStr.trim();<br>const node = t.content.firstChild;
提取多个节点或指定子元素
如果 HTML 字符串包含多个顶层元素，或你只想取其中某几块（比如最后 3 个 .item），不能只靠 firstChild。
立即学习“Java免费学习笔记（深入）”；
- 先用
template或DOMParser解析成完整结构 - 再用
querySelectorAll等标准 API 筛选，例如：const items = t.content.querySelectorAll('.item');<br>const lastThree = Array.from(items).slice(-3); - 插入时推荐用
fragment.append(...lastThree)或el.append(...lastThree)，避免重复重排
必须避开的坑
-
别存 DOM 节点到 localStorage：它只能存字符串，存进去就变
"[object HTMLElement]"，读出来无法appendChild -
别用普通
div.innerHTML解析不可信内容：可能触发内联事件、<script>执行，有 XSS 风险 -
别对字符串直接调用
querySelector：字符串没有 DOM 方法，会报undefined is not a function -
注意空格和换行：未 trim 的字符串可能导致
firstChild是文本节点（nodeType === 3），需跳过
