Question

我正在处理一个允许用户通过单击按钮添加额外输入字段的表单。

它基本上是这样的：

<div>
   <input type="text" placeholder="existing"/>
</div>

<button class="add">add</button>

使用一点JavaScript：

var add = document.querySelector(".add");
var div = document.querySelector("div");

add.addEventListener('click', function () {

    div.innerHTML += '<input type="text" placeholder="new"/>';

});

但是，我注意到单击按钮时 - 如果任何现有输入字段具有值，则会清除它们。

我一直在摆弄它一段时间似乎找不到阻止这种情况发生的解决方案，所以我想知道这里是否有人可以提供帮助。

这是一个小提琴http://jsfiddle.net/gxzLZ/

Answer 1

如果您尝试console.log(div.innerHTML)，您会看到打印的HTML为：

<input type="text" placeholder="existing"><input type="text" placeholder="new">...

在<input>内输入内容时，不要编辑输入值。您需要保留原始内容，并避免每次覆盖整个div内容

我会这样做：http://jsfiddle.net/gxzLZ/5/

<强> JS

var add = document.querySelector(".add");
var div = document.querySelector("div");

add.addEventListener('click', function () {
    var input = document.createElement('input')
    input.type = "text";
    input.placeholder = "new";
    div.appendChild(input);
});

Answer 2

创建元素，更改outerHTML，然后使用appendChild。

add.addEventListener('click', function () {
    var newInput = document.createElement('input');
    newInput.outerHTML = '<input type="text" placeholder="new"/>';
    div.appendChild(newInput);

});

Demo here

Answer 3

可能会有这样的工作吗？

<强> HTML

<div id="div"><input type="text" placeholder="existing" id="input"/></div>
<button class="add">add</button>

<强> JAVASCRIPT

var add = document.querySelector(".add");
var div = document.querySelector("div");

add.addEventListener('click', function(){
    var cloned = document.getElementById('input').cloneNode(true);
    cloned.value = '';  // cloned will have no value
    document.getElementById('div').appendChild(cloned);
}, false);

我正在使用cloneNode创建完全相同的节点。如果你想让新添加的没有任何价值，它也可以起作用

<强> FIDDLE HERE

Answer 4

输入框的值正在消失，因为当你写

时

div.innerHTML += '<input type="text" placeholder="new"/>';，

div.innerHTML会被div.innerHTML+'<input type="text" placeholder="new"/>'取代，因为输入值不会出现在HTML代码中，所以会重置。

而是创建这样的元素：

var inp = document.createElement("input");

inp.type="text";

document.body.appendChild(inp);。

停止在innerHTML插入上清除输入

4 个答案: