Question

所以我正在创建可以添加自定义字段的表单。我最初使用.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>');

  });

为什么？

Answer 1

问题是因为“+ =”运算符：

getElementById("outer_div").innerHTML +='<input></input>';

正在发生的事情是你每次都重置innerHTML的完整值，这有效地删除了现有的字段并重新添加它们。

jQuery没有发生这种情况的原因是，jQuery正在使用Javascript .appendChild函数直接在DOM中插入新元素。

您的示例的纯JavaScript版本将是这样的：

var inpElem = document.createElement("input");

document.getElementById("outer_div").appendChild(inpElem);

Answer 2

这是因为写入字段的值不被视为现有HTML的一部分。因此，当您将新HTML附加到表单时，值会丢失，因为就innerHTML而言，它们无论如何都不存在。可能的修复方法是将所有表单的值临时存储在变量中，然后将新的HTML附加到旧的HTML后，将它们重新分配到适当的字段。