javascript - 为什么 innerHTML 会删除这些输入字段上的值？

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);