innerHTML赋值可直接解析渲染HTML字符串，但需确保结构合法、防范XSS攻击、避免操作时机错误，并优先考虑textContent或DocumentFragment提升安全与性能。
直接用 innerHTML 赋值就能动态解析并渲染 HTML 字符串，浏览器会自动把字符串转成 DOM 节点并插入。但要注意结构合法性、安全性和操作时机，否则容易出错或被篡改。
基本写法：赋值即解析
只要目标元素存在，给它的 innerHTML 属性赋一个含 HTML 标签的字符串，浏览器立刻解析并渲染：
-
获取元素：比如
const box = document.getElementById('content'); -
赋值字符串：比如
box.innerHTML = '<p>你好</p> <ul><li>列表项</li></ul>'; - 结果：页面上显示为一个段落加一个无序列表，不是纯文本
表格等复杂结构要守规范
如果字符串里含 <table>，必须符合 HTML 嵌套规则，否则浏览器会“纠错”导致内容移位：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<ul><li>
<font color="#2E8B57">合法写法</font>：<tr> 里面只能放 <td> 或 </td>
<th>，不能直接塞 <div> 或 <ul>
<li>
<font color="#2E8B57">错误示例</font>：<code>box.innerHTML = '<tr><ul><li>错</li></ul></tr>'; → 浏览器会把
- 移出表格
想操作新生成的元素？别急着查
用 innerHTML 插入后，新节点已存在于 DOM 中，但若立即用 querySelector 查找，可能因执行太快而找不到：
-
稳妥做法：赋值后直接在该元素内查找，比如
box.querySelector('.new-btn') -
更可靠方案：用
DOMParser先解析字符串为真实 DOM 节点，再修改属性、绑定事件，最后一次性 append 到页面 -
示例：
const doc = new DOMParser().parseFromString(htmlStr, 'text/html'); const node = doc.body.firstChild; node.querySelector('button').onclick = handler; box.appendChild(node);
安全和性能要注意
innerHTML 解析的是任意 HTML，不加过滤可能执行恶意脚本，频繁操作也影响性能：
-
防 XSS：绝不直接插入用户输入的内容；如需展示原始 HTML，先做转义（如把
替成 <code><） -
纯文本场景：用
textContent更安全、更快，不会解析标签 -
大批量更新：考虑用
DocumentFragment拼好再插入，减少重排重绘
