JavaScript动态追加div时原有input输入值被清空如何解决

核心问题出在form.innerHTML+=html这行代码上。
你可能以为这行逻辑是在现有内容末尾直接追加新元素，实际上它的完整执行流程是：

• 先读取animals容器内所有现有DOM，序列化为静态HTML字符串
• 把你写的新HTML片段拼接到这个字符串末尾
• 将拼接完成的完整字符串重新解析为DOM，全量替换容器内的原有内容

用户在输入框中填写的内容属于DOM的实时运行状态，不会被包含在序列化生成的静态HTML中，全量替换后原有输入框都变成了新渲染的空元素，之前输入的内容自然就被清空了。

最稳妥的方案是放弃innerHTML拼接的写法，改用原生DOM API创建节点后再追加，这种方式只会新增节点，不会改动已经渲染完成的旧元素，输入内容会完整保留。
修正后的JS代码如下：

var counter = 0;
function add_more_animals() {
    counter += 1;
    // 创建动物条目容器
    const animalDiv = document.createElement('div');
    animalDiv.id = `animal${counter}`;

    // 创建动物名称输入框
    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.name = `animalName${counter}`;

    // 创建动物类型输入框
    const typeInput = document.createElement('input');
    typeInput.type = 'text';
    typeInput.name = `animalType${counter}`;

    // 组装节点并追加到表单容器
    animalDiv.append(nameInput, typeInput);
    document.getElementById('animals').append(animalDiv);
}

原有HTML代码不需要做任何修改，保持原写法即可正常运行。

小提示：如果觉得逐个创建元素写起来繁琐，想保留模板字符串的写法，只需要把原代码里的form.innerHTML+=html;替换为form.insertAdjacentHTML('beforeend', html);即可。这个方法会直接将传入的HTML片段解析为DOM节点插入到容器末尾，不会触发容器内已有元素的重新渲染，同样能避免输入内容被清空的问题。

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