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:将输入连接到输入,输入值消失。 :'(
最佳答案
不要使用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>
关于Javascript concat 清除输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51536201/