Javascript 在innerHTML插入时停止清除输入

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

基本上是这样的：

<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"/>';

});

var add=document.querySelector（“.add”）；
var div=document.querySelector（“div”）；
add.addEventListener（'click'，函数（）{
div.innerHTML+=''；
});

但是，我注意到，当单击按钮时，如果任何现有的输入字段都有值，它们就会被清除

我已经摆弄它一段时间了，似乎找不到一个解决方案来阻止这种情况发生，所以我想知道这里是否有人可以帮忙

---

这是一把小提琴

能不能像这样的作品

HTML

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

我使用cloneNode创建完全相同的节点。如果您希望新添加的内容没有任何价值，那么它也可以工作

---

创建一个元素，更改

outerHTML

，然后使用

appendChild

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

});

add.addEventListener（'click'，函数（）{
var newInput=document.createElement（'input'）；
newInput.outerHTML=''；
div.appendChild（newInput）；
});

---

如果尝试

console.log（div.innerHTML）

您将看到打印的HTML是：

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

---

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

div.innerHTML+='',

发生的情况是，
div.innerHTML
被
div.innerHTML+'
替换，并且由于HTML代码中不存在输入值，因此它们会被重置

而是创建如下元素：

var inp=document.createElement（“输入”）

inp.type=“text”

document.body.appendChild（inp）
我比公认的答案更喜欢这一点，即能够在html代码中创建元素。但在修改
outerHTML
之前，请确保执行了
div.appendChild
。
<input type="text" placeholder="existing"><input type="text" placeholder="new">...

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