添加动态表格行时输入值丢失，求解决方案

问题根源 #

1. innerHTML重置丢失值：当你用tbodyRef.innerHTML += newHtml时，innerHTML只会返回元素初始的HTML结构（不包含用户输入的value）。重新赋值后，浏览器会重新渲染所有元素，原有输入框的用户输入会被重置为空。
2. append传入字符串导致纯文本：append()方法接受的是DOM节点对象，直接传HTML字符串会被当作文本节点插入，所以只会显示纯文本而非表单元素。

最佳解决方法：插入真实DOM节点 #

不要拼接HTML字符串后直接操作innerHTML，而是将HTML字符串转换为真实的DOM节点，再插入到表格中。这样既不会覆盖原有内容，也能完整保留用户已输入的值。

方法1：用DOMParser转换HTML字符串为DOM节点

// 假设你的newHtml是包含<tr>的HTML字符串
const parser = new DOMParser();
const doc = parser.parseFromString(newHtml, 'text/html');
const newRow = doc.querySelector('tr');
tbodyRef.appendChild(newRow);

方法2：手动创建DOM元素（更可控）

如果不想拼接HTML字符串，可以直接用DOM API创建元素，灵活性更高：

// 创建新行
const newRow = document.createElement('tr');

// 创建第一个单元格及输入框
const td1 = document.createElement('td');
const input1 = document.createElement('input');
input1.type = 'text';
input1.name = 'item[]';
td1.appendChild(input1);

// 创建第二个单元格及输入框（示例）
const td2 = document.createElement('td');
const input2 = document.createElement('input');
input2.type = 'number';
input2.name = 'quantity[]';
td2.appendChild(input2);

// 组装行并插入
newRow.appendChild(td1);
newRow.appendChild(td2);
tbodyRef.appendChild(newRow);

为什么这个方案有效 #

• 直接操作DOM节点时，原有元素的状态（包括用户输入的value）不会被破坏，新元素是独立添加的，不会触发整体重渲染。
• 插入的是真实表单元素，而非文本，能正常响应用户输入。

内容的提问来源于stack exchange，提问作者iAmBorgy