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 调用添加和删除更多输入（连同它们的 divs！）。 Javascript 调用 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

下面的代码可能是适合您的解决方案。通过这种方式，您不会在添加新输入时用关联值覆盖现有输入。

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 2

不要使用 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 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 清除输入字段

Javascript concat clearing input fields

html

javascript

string-concatenation