Javascript concat 清除输入字段

Question

function js() {
  document.getElementById("example").innerHTML = document.getElementById("example").innerHTML+"<input type=\"text\" name=\"name\" />";
}

<div id="example">
  <input type="text" name="name[]" />
</div>

<button type="button" onclick="js();">Click</button>

我有一个表单，需要可变数量的输入类型。

<form action="" method="">
   [...]
   <div id="mezok">
      <div id="input_id">
         <input type="text" name="name" />
      </div>
   </div>
[...]
</form>

我通过 ajax 调用添加和删除更多输入(连同它们的 div!)。 Javascript 调用生成新 input_id div 的 php，然后连接到 div id="mezok"的其余部分。只要一切都是空的，添加和删除输入就可以了。但是，当我在输入中有内容时添加新的 div 时，它会清除其余的输入。

document.getElementById("mezok").innerHTML = document.getElementById("mezok").innerHTML+http.responseText;

document.getElementById("mezok").innerHTML += http.responseText;

document.getElementById("mezok").innerHTML.concat(http.responseText);

(最后一个根本不行...)

TL;DR:将输入连接到输入，输入值消失。 :'(

Answer 1

不要使用innerHTML。您正在做的是重新绘制整个容器内容，每次删除现有输入并创建新输入。我的经验表明，当您访问 innerHTML 时，请重新检查您的代码，因为您可能正在做一些奇怪的事情。

您需要做的是单独创建输入并将它们附加到容器中，而不触及其余输入。就像将元素附加到数组。

这样代码更容易解​​释，而且性能更好:

function js() {
    var input = document.createElement("input"); // Create a new input element. Is like "<input>".
    input.setAttribute("type", "text"); // Set the 'type' attribute to 'text'. Is like having '<input type="text">'
    input.setAttribute("name", "name[]"); // Set the 'name' attribute to 'name[]'. Is like having '<input name="name[]">' but because you already have set the type, now is like having '<input type="text" name="name[]">'
    document.getElementById("example").appendChild(input); // Push it to the container
}

<div id="example">
  <input type="text" name="name[]" />
</div>

<button type="button" onclick="js();">Click</button>