阻止innerHTML插入时清除输入内容

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/

- user3143218

Answer 1

创建一个元素，修改 outerHTML，然后使用 appendChild。

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

});

Demo here

- Carson Ip

---

我更喜欢这个答案，因为它可以在HTML代码中创建一个元素。 - Simon Baars

但是请确保在修改 outerHTML 之前执行 div.appendChild。 - sam-pyt

Answer 2

如果你尝试执行 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);
});

- BeNdErR

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

- Hawk

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);

。

这段代码与编程有关。

- Parag Gangil