不要用 innerHTML += 追加HTML，因其会重建全部子节点导致表单状态丢失、事件失效和性能卡顿；应改用insertAdjacentHTML()插入或createElement()+appendChild()创建节点。
直接用 innerHTML += 追加 HTML 内容，看似简单，实则大概率埋下性能、XSS 和 DOM 状态丢失的坑。真正安全又可控的做法，是明确区分场景后选择对应 API。
为什么不要用 innerHTML += 动态追加
它每次执行都会触发浏览器重新解析整个 innerHTML 字符串，重建全部子节点——哪怕你只加一行 <tr><td>新数据</td></tr>，原来表格里所有 <input> 的值、focus 状态、绑定的事件监听器全被清空。
常见错误现象：
- 表格行追加后，原输入框内容消失、光标丢失
- 点击事件突然失效（因为旧节点被销毁，新节点没重绑）
- 大量追加时页面明显卡顿（反复 parse + render）
正确做法是：拼接完整字符串再一次性赋值，或改用不破坏现有节点的插入方式。
立即学习“前端免费学习笔记（深入）”；
insertAdjacentHTML() 是最贴近“追加语义”的原生方案
它不碰现有子节点，只在指定位置插入新 HTML 字符串，且支持四个精准锚点："beforebegin"、"afterbegin"、"beforeend"、"afterend"。对表格追加行，"beforeend" 就是天然选择。
使用场景：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 向
<tbody> 末尾插入新 <code><tr> <li>在某个按钮前插入提示文案</li> <li>避免因替换整个 innerHTML 导致的表单状态丢失</li> <p>示例：</p> <pre class='brush:php;toolbar:false;'>const tbody = document.querySelector('tbody'); tbody.insertAdjacentHTML('beforeend', '<tr><td>张三</td><td>28</td></tr>');</pre> <p>注意：<code>insertAdjacentHTML()仍会解析 HTML，不可信内容必须先转义；它不返回新节点，如需操作新插入的元素，得再查一次 DOM。需要操作新节点？用
document.createElement()+appendChild()当你追加后要立刻绑定事件、设置属性、或读取生成后的 DOM 结构（比如计算高度），字符串插入就不够用了。这时应走标准节点创建流程。
参数差异与关键点：
-
document.createElement('tr')创建的是“干净”节点，无样式、无事件、无副作用 - 必须手动
appendChild()到目标容器，不会自动渲染 - 如果要批量插入多行，先用
DocumentFragment中转，避免多次重排
示例（带事件绑定）：
const tr = document.createElement('tr'); const td1 = document.createElement('td'); td1.textContent = '李四'; const td2 = document.createElement('td'); td2.innerHTML = '<button onclick="alert(1)">操作</button>'; tr.appendChild(td1); tr.appendChild(td2); document.querySelector('tbody').appendChild(tr);⚠️ 注意：内联
onclick不推荐，应改用tr.addEventListener('click', handler)；textContent比innerHTML更安全，除非真需要渲染 HTML。表格结构特殊，
<tbody> 是追加行的黄金容器 <p>直接往 <code><table> 上调用 <code>insertAdjacentHTML('beforeend', ...)可能被浏览器自动修正为无效结构（比如把<tr> 塞进 <code><caption></caption>下），导致渲染错乱或控制台报错Invalid table structure。正确做法永远指向语义容器：
- 新增数据行 → 插入到
<tbody> 内部末尾（<code>"beforeend"） - 新增表头行 → 插入到
<thead> 内部末尾 <li>新增总计行 → 插入到 <code><tfoot> 内部末尾 <p>没有 <code><tbody>？浏览器会自动补上，但显式写出来才能稳定控制插入位置。别依赖自动修复逻辑。</tbody>
-
