最推荐用 insertrow() 方法插入表格新行，它是原生、兼容性好、自动更新 rows 集合；避免 innerhtml +=（会丢失状态和事件）、慎用 documentfragment（适合批量插入）、框架中应走数据驱动而非手动 dom 操作。
用 insertRow() 在 table 里加新行最直接
直接操作 DOM 是最可控的方式，insertRow() 是原生方法，不用依赖框架，兼容性好（IE6+ 都支持）。它自动把新行插入到指定位置，还会同步更新 rows 集合，后续操作不会丢行。
常见错误是调用时没指定 table 元素，或传错索引（比如超出当前行数），导致报错 IndexSizeError 或插到奇怪位置。
- 必须先拿到
<table> 的 DOM 引用，比如 <code>document.getElementById('myTable') - 参数是插入位置索引：0 表示第一行，-1 或省略表示追加到末尾
- 返回值是新创建的
<tr> 元素，可立刻用它添加单元格：<code>newRow.insertCell(0) - 不要对
tBodies[0]单独调用insertRow()——虽然可行，但容易漏掉 thead/tfoot，推荐直接对 table 调用 - 如果某行里有
<input type="text">，用innerHTML +=后用户刚输的内容就没了 - 若之前用
addEventListener给某 td 绑过点击，新增行后老行的监听还在，但新行没绑——除非你每次追加后重绑 - 字符串拼接易出 XSS 漏洞，动态内容必须先
escapeHTML()处理，不能直接拼 - 创建片段：
const frag = document.createDocumentFragment() - 循环中用
frag.appendChild(newRow)，不是table.appendChild() - 最后执行
table.appendChild(frag)——注意这里不是insertRow()，是直接挂载 fragment - fragment 不在 DOM 树里，所以中间操作不触发重排，性能优势明显
- React 示例：维护一个
rows数组 state，setRows(prev => [...prev, newRowData]) - Vue 示例：定义
rows: ref([])，然后rows.value.push(newRowData) - 强行用
ref拿到 table 元素再insertRow()，下一次 diff 可能把它抹掉——框架不知道你动了 DOM
innerHTML += 追加行看似简单，但有隐藏风险
写法短：table.innerHTML += '<tr><td>data</td></tr>'。但它会**重绘整个 table**，已绑定的事件监听器、表单输入值、焦点状态全丢，还可能触发重复解析（比如嵌套 script 或自定义元素）。
只适合初始渲染后、完全静态的表格，或者你明确知道没有交互态要保留。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
用 DocumentFragment 批量插入多行更高效
一次插入 10 行，用 10 次 insertRow() 会触发 10 次重排；而先建 DocumentFragment，把所有 tr append 进去，最后再一次性加进 table，浏览器只重排一次。
适合初始化大量数据，或用户一次提交多条记录的场景。
React/Vue 项目里别手动操作 DOM
如果你的 table 在 React 函数组件或 Vue 选项式/组合式 API 里渲染，硬用 insertRow() 会绕过框架的数据流，导致视图和 state 不一致：state 加了数据，DOM 却没更新，或者反过来。
该用框架机制——React 改 state 触发 re-render，Vue 用 push() 更新响应式数组。
insertRow()；批量加且性能敏感，上 DocumentFragment；框架项目里，老老实实走数据驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
