动态添加输入框时原有输入值自动清空问题咨询

嘿，我之前开发类似功能时也踩过这个坑！这种情况90%是因为你用了innerHTML来插入新输入框——这个操作会重新渲染整个容器内的DOM结构，相当于把之前的输入框都删掉再重新创建一遍，输入的内容自然就没了。下面给你两种解决思路，亲测有效：

一、用原生JS创建元素（推荐，最稳妥） #

放弃innerHTML，改用createElement和appendChild来添加新输入框，这种方式只会在容器末尾追加新元素，完全不会触动已经存在的DOM节点，之前输入的值肯定能保留。示例代码如下：

// 获取存放输入框的容器
const inputContainer = document.getElementById('input-container');

// 创建新的输入框元素
const newInput = document.createElement('input');
newInput.type = 'text';
// 按需添加类名、占位符等属性
newInput.className = 'dynamic-input';
newInput.placeholder = '请输入内容';

// 把新输入框追加到容器里
inputContainer.appendChild(newInput);

二、如果必须用innerHTML（不推荐，但可补救） #

要是你因为项目限制非得用innerHTML，那得先把现有输入框的值保存下来，添加完新元素后再把值回填回去：

const inputContainer = document.getElementById('input-container');
// 第一步：保存所有现有输入框的值
const existingValues = Array.from(inputContainer.querySelectorAll('input'))
  .map(input => input.value);

// 第二步：添加新输入框
inputContainer.innerHTML += '<input type="text" class="dynamic-input" placeholder="请输入内容">';

// 第三步：把保存的值重新填回对应的输入框
const allInputs = inputContainer.querySelectorAll('input');
existingValues.forEach((value, index) => {
  allInputs[index].value = value;
});

不过这种方法比较繁琐，要是输入框还有其他自定义属性（比如disabled、data-*），还得额外处理，所以优先选第一种方法。

额外排查点 #

除了DOM重绘的问题，还要检查这两个常见坑：

• 是不是添加按钮没加type="button"？默认按钮类型是submit，点击会触发表单提交刷新页面，所有输入内容都会清空。给按钮加上type="button"就行。
• 如果你用了React、Vue这类框架，千万别直接操作DOM！得用框架的状态来管理输入框列表，比如在Vue里用v-for循环渲染，React里用数组状态存输入框数据，手动操作DOM会被框架的虚拟DOM覆盖，导致内容丢失。

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