代码之家 › 专栏 › 技术社区 › kry

清除输入字段的Javascript concat

string-concatenation html javascript

kry · 技术社区 · 6 年前

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>

我添加和删除更多的输入(以及它们的div!)通过ajax调用。Javascript调用一个php,该php生成一个新的输入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:concat输入到输入,输入值消失。:'(

3 回复 | 直到 6 年前

Ray Soy 6 年前

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

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>

如果这对你有用,请告诉我。

Jorge Fuentes González 6 年前

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

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

这样代码就更容易解释,而且性能也更好:

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>

-1

Sandip Nirmal 6 年前

为我好好工作。

<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