使用 innerHTML 复制含输入框的表格行会导致值丢失，根本原因是 <tr> 等表格元素不支持可靠读取 innerHTML，且 innerHTML += ... 会强制重渲染并销毁原有 DOM 节点及其状态；应改用 insertAdjacentHTML 或更健壮的 DOM 克隆方案。
使用 `innerhtml` 复制含输入框的表格行会导致值丢失，根本原因是 `
在动态表格操作中，常见需求是“点击按钮新增一行”，且新行需继承模板结构（如输入框、下拉菜单等），同时保留已有行中用户已填写的内容。你当前代码的问题核心在于：
adit.innerHTML += '<tr>' + temp + '</tr>'; // ❌ 危险操作！
该写法会触发浏览器对整个 <tbody id="aditional"> 的完全重解析与重建：所有子节点（包括已填值的 <input>）被销毁并重新创建，导致所有输入内容清空。
✅ 正确做法：避免 innerHTML 操作表格结构
方案一：使用 insertAdjacentHTML()（推荐轻量级场景）
insertAdjacentHTML() 将 HTML 字符串插入指定位置，不干扰现有 DOM 节点，因此已存在的输入框状态得以保留：
<script>
const template = document.getElementById("template");
const aditional = document.getElementById("aditional");
function add() {
// 安全插入：在末尾添加新行（不破坏现有节点）
aditional.insertAdjacentHTML('beforeend',
`<tr>${template.innerHTML}</tr>`
);
renum();
}
function renum() {
const lpCells = document.querySelectorAll("#aditional .lp");
lpCells.forEach((cell, index) => {
cell.textContent = index + 1;
});
}
</script>⚠️ 注意：template.innerHTML 在此仍可工作，是因为我们读取的是 <tr> 的 原始模板（静态 HTML），而非已渲染行的实时状态。但若模板中含需绑定事件或复杂状态的组件，此法仍有局限。
方案二：使用 cloneNode(true)（推荐生产环境）
彻底规避 HTML 字符串解析风险，直接克隆 DOM 节点，并手动重置新行中的唯一标识（如 name、id、初始值）：
function add() {
const newRow = template.cloneNode(true);
// 清空新行中所有输入框的值（保留结构，清除用户输入）
const inputs = newRow.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
if (el.type !== 'hidden') el.value = '';
});
// 可选：重命名 input name 属性以支持后端接收数组（如 name="price[]" → name="price[2]"）
// const idx = aditional.children.length;
// newRow.querySelectorAll('input').forEach(inp => {
// inp.name = inp.name.replace(/\[\d*\]/, `[${idx}]`);
// });
aditional.appendChild(newRow);
renum();
}方案三：模板字符串 + 动态属性（现代简洁写法）
若模板结构固定，可将 HTML 提取为 JavaScript 模板字符串，显式控制属性与初始状态：
function createRow(index) {
return `
<tr>
<td class="lp">${index}</td>
<td><input type="text" name="item[${index}][name]" placeholder="商品名"></td>
<td><input type="number" name="item[${index}][price]" placeholder="价格"></td>
<td><button type="button" onclick="removeRow(this)">删除</button></td>
</tr>
`;
}
function add() {
const count = document.querySelectorAll("#aditional tr").length;
const newRowHtml = createRow(count + 1); // 新序号从1开始
aditional.insertAdjacentHTML('beforeend', newRowHtml);
}? 关键总结
- 永远不要对 <table>、<tbody>、<tr> 等表格元素使用 innerHTML += ... —— 浏览器会强制重绘，清空所有输入状态；
- insertAdjacentHTML() 是 innerHTML 的安全替代，适用于简单 HTML 插入；
- 对于复杂交互（如带事件监听、动态验证的表单），优先使用 cloneNode(true) + 手动初始化；
- 使用 querySelectorAll 替代过时的 getElementsByClassName，语义更清晰，返回静态 NodeList；
- 行号重算（renum）建议在插入后统一处理，避免多次遍历。
通过以上任一方案，即可实现「新增行不重置旧数据」的目标，兼顾稳定性与可维护性。
