为什么innerHTML要删除这些输入字段上的值？
因此，我正在创建表单，它可以添加自定义字段。我最初使用.innerHTML来添加这些附加表单。当我添加新的表单时，前一个表单中的任何值都会被删除。
所以html看起来如下：
<button id="add"></button>
<div id = "outer_div"></div>最初的javascript如下所示：
$(document).on("click", "#add", function()
{
getElementById("outer_div").innerHTML +='<input></input>';
});假设您添加了两个字段。你在第一个字段里写了一些东西。你按#add按钮。您在第一个字段中所写的内容现在已被清除。
我决定使用jquery，它不再有这个问题：
$(document).on("click", "#add", function()
{
$("#outer_div").append('<input></input>');
});为什么？
回答 2
Stack Overflow用户
发布于 2016-06-28 23:23:40
这个问题是因为"+=“运算符：
getElementById("outer_div").innerHTML +='<input></input>';
正在发生的情况是，每次都要重置innerHTML的全部值，这将有效地删除现有字段并重新添加它们。
在jQuery中没有出现这种情况的原因是，在幕后，jQuery使用Javascript .appendChild函数直接插入DOM中的新元素。
您的示例的纯javascript版本如下所示：
var inpElem = document.createElement("input");
document.getElementById("outer_div").appendChild(inpElem);Stack Overflow用户
发布于 2016-06-28 23:11:04
这是因为写入字段的值不被视为现有HTML的一部分。因此，当您将新的HTML附加到表单中时，这些值就会丢失，因为就innerHTML而言，它们无论如何都不存在。一个可能的修复方法是将所有表单的值暂时存储在变量中，然后，一旦新HTML被附加到旧的HTML中，将它们重新分配到适当的字段中。
https://stackoverflow.com/questions/38087678
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号