停止清除 insideHTML 插入中的输入

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

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

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

});

演示在这里

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