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调用一个php，该php生成一个新的input_id div，然后将其连接到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>

Answer 2

以下代码可能是您的解决方案。这样，您在添加新输入时就不会用关联的值覆盖现有输入。

function js() {
    var inputElementToAppend = document.createElement('input');
    inputElementToAppend.innerHTML = "<input type=\"text\" name=\"name\" />";
    document.getElementById("example").appendChild(inputElementToAppend.firstChild);
}

<div id="example">
  <input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>

让我知道这是否对您有用。

Answer 3

对我来说很好。

<button onclick="myFunction()">Try it</button>

<p id="demo">ABC</p>

<script>
function myFunction() {
    var x = document.getElementById("myP").innerHTML;
    document.getElementById("demo").innerHTML += `<input type=\"text\" name=\"name\" />`;
}
<script>

我建议使用appendChild和removeChild而不是innerHTML

Javascript Concat清除输入字段

3 个答案: