如何在JavaScript添加新列表项时保留已有列表项的数据

问题根源 #

你当前使用 innerHTML += newRow 来添加新行，这种操作会销毁容器内所有现有DOM元素，再重新渲染原内容+新内容，导致用户已输入的数据全部丢失。

修复方案 #

用 insertAdjacentHTML 替代 innerHTML +=，这个方法可以在不破坏现有DOM结构的前提下，直接向容器末尾插入新的HTML片段。

修改后的JavaScript代码：

function newDebitRow() {
 let debitEntriesContainer = document.getElementById('debit_entries_container');
 let newRow = `
 <li data-debit-entry-list>
      <div class="but" style="display: flex; justify-content: space-between;">
      <button type="button" data-add-debit-line onclick="newDebitRow();">+</button>
      <button type="button" data-remove-debit-line>-</button>
      </div>
      <select name="debit_account_type" class="type" title="select account type" data-debit-account-type>
      <option value="">Select</option>
      <option value="asset">Asset</option>
      <option value="expense">Expense</option>
      <option value="liability">Liability</option>
      <option value="fund">Fund</option>
      <option value="revenue">Revenue</option>
      </select>
      <select name="debit_account_category" class="cat" title="select account category" data-debit-account-category>
      <option value="">Select</option>
      </select>
      <select name="debit_account_name" class="name" title="select one of the names" data-debit-account-name>
      <option value="">Select</option>
      </select>
      <input type="text" name="debit_account_number" required class="code" data-debit-account-number readonly/>
      <p class="bal">0.00</p>
      <input type="text" name="debit_account_amount"
           placeholder="&#8358; 0.00" onkeyup="debitAmountEntry();" required
           class="amount" data-debit-account-amount/>
 </li>
 `
 // 替换原innerHTML += 为insertAdjacentHTML
 debitEntriesContainer.insertAdjacentHTML('beforeend', newRow);
 getAllButtons();
 debitEntriesChanges();
}

为什么这个方法有效 #

insertAdjacentHTML('beforeend', newRow) 会直接在容器的最后一个子元素后面插入新的HTML，不会触动任何已存在的DOM元素，因此用户之前输入的内容会完整保留。

额外注意事项 #

• 确保 getAllButtons() 函数正确绑定了新行中删除按钮的点击事件，避免新增行的删除功能失效。
• 如果后续需要对列表项做批量操作，建议始终使用DOM操作API（如appendChild、insertBefore等）而非innerHTML，防止数据丢失。

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