最简单方式是直接调用table.insertrow()或table.insertrow(-1)，自动在末尾插入新行；插入后必须用insertcell()逐个添加单元格并设置内容，避免innerhtml拼接导致重排和事件丢失。
用 insertRow() 在表格末尾加一行最简单
直接调用表格元素的 insertRow() 方法，它会自动在 <tbody> 末尾插入新行，不用手动创建 <code><tr> 元素。注意：如果表格没写 <code><tbody>，浏览器会隐式生成一个，但最好显式写出来，避免兼容性问题。
<p>常见错误是把 <code>insertRow() 调用在 <table> 上却没指定索引，结果插到表头（<code><thead>）后面、第一行数据前——这通常不是你想要的。
<ul><li>
<code>table.insertRow(-1) 等价于追加到 <tbody> 末尾（推荐）
<li>
<code>table.insertRow() 不传参，默认也是 -1，但显式写更清晰
table.insertRow(1)，但要确保目标位置在 <tbody> 内，不在 <code><thead> 或 <code><tfoot> 里
<h3>新增行后必须用 <code>insertCell() 填充单元格
insertRow() 只创建空 <tr>，不带任何 <code><td>。漏掉这步，行会“看不见”——DOM 里存在，但渲染为空白。
<p>每个单元格都要单独调用 <code>insertCell()，顺序决定列序。不能靠 innerHTML 一次性塞整行 HTML，否则容易破坏结构或触发重排。
- 用
row.insertCell(0)插入第 1 列，row.insertCell(1)插入第 2 列……索引超出当前列数时自动追加 -
cell.textContent = '内容'比cell.innerHTML = '内容'更安全，避免 XSS 和标签解析错误 - 如果某列需要
<input>，得用document.createElement('input')创建再 append，不能只设 textContent
动态加行时别直接操作 innerHTML 拼接字符串
有人习惯拼接 table.innerHTML += '<tr><td>xxx</td></tr>'，这会导致整个 <tbody> 重渲染，已有的 input 输入框会丢失焦点、事件监听器全部失效、滚动位置重置。
<p>尤其当表格已有几十行、且含 checkbox 或自定义组件时，这种写法会让交互彻底断裂。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7672" title="java-enterprise"><img
src="https://img.php.cn/upload/skill/000/000/081/179161929545163.jpg" alt="java-enterprise" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7672" title="java-enterprise" class="overflowclass">java-enterprise</a>
<p class="overflowclass">Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、</p>
</div>
<a rel="nofollow" href="/xiazai/skill7672" title="java-enterprise" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>所有动态增删都该走 DOM 方法（<code>insertRow/insertCell/removeChild）
document.createElement('template') 解析，再 cloneNode(true) 插入，但多数场景没必要绕这么远给新行绑定事件要用事件委托，别每个 <button></button> 单独 addEventListener
每加一行就给里面的删除按钮绑一次 click，100 行就是 100 个监听器，内存泄漏风险高，而且后续新增行还得重复绑定。
表格本身是稳定容器，把事件监听挂到 <table> 或 <code><tbody> 上，用 <code>event.target.matches('.del-btn') 判断点击源，才是可持续做法。
- 监听器只需绑定一次，在页面初始化时完成
- 新行里的按钮无需额外绑定，只要 class 或 data 属性匹配即可被委托捕获
- 注意
event.target可能是<i></i>图标而非按钮本身，用event.target.closest('.del-btn')更稳妥
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
