停止清除 innerHTML 插入上的输入答案

【问题标题】：Stop input from clearing on innerHTML insert停止清除 innerHTML 插入上的输入
【发布时间】：2014-06-11 20:21:07
【问题描述】：

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

基本上是这样的：

<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/

【问题讨论】：

标签： javascript html forms

【解决方案1】：

如果你尝试console.log(div.innerHTML)，你会看到打印出来的 HTML 是：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

});

Demo here

【讨论】：

比起公认的答案，我更喜欢这个，因为它能够在 html 代码中创建一个元素。
但是在修改outerHTML之前，请确保你先做div.appendChild。

【解决方案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

【讨论】：

【解决方案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);.

【讨论】：