Question

我有一个div容器和一个按钮。每当我点击按钮时，都会在div中添加一个空文本框。现在，我的问题是每当我点击按钮时，都会添加文本框，但会删除所有其他文件的值。

这个功能是这样的：

function addTextBox() {
    document.getElementById("txtList").innerHTML += "<input type='text'>";
}

Answer 1

我认为它可以帮到你：

var child = document.createElement('input')
 document.getElementById("txtList").appendChild(child);

Answer 2

您可以实现与以下代码段相同的功能：

function addTextBox() {
    var input = document.createElement("input");
    input.type = "text"
    document.getElementById("txtList").appendChild(input);
}

document.getElementById("addTxtBoxBtn").addEventListener("click",addTextBox);

<input type="button" id="addTxtBoxBtn" value="add TextBox"/>
<div id="txtList">
</div>

为什么你不能用innerHTML实现同样的东西？

这种情况发生because：

Element.innerHTML属性设置或获取描述元素后代的 HTML语法。

虽然ipunt元素的value不是元素的属性而是属性（请查看here）。

如果您想检查它的实际效果，请尝试以下代码段：

function addTextBox() {
    var txtList = document.getElementById("txtList");
    console.log(txtList.innerHTML);
    txtList.innerHTML += "<input type='text'/>" ;
}

document.getElementById("addTxtBoxBtn").addEventListener("click",addTextBox);

<input type="button" id="addTxtBoxBtn" value="add TextBox"/>
<div id="txtList">
</div>

Answer 3

这里发生的事情是，当您使用innerHTML将DOM作为文本追加时，您只需重写HTML的那一部分。编辑textList innerHTML将执行该元素的新绘制，并且将再次解析所有信息。这意味着您失去了用户互动。

要成功更新DOM元素，有一些方法可以让您这样做。即document.createElement和document.appendChild。

通过附加DOM元素而不是连接innerHTML(text)，强制特定区域的有限绘制。这使得DOM的其余部分保持完整。

您的代码

function addTextBox() {
    document.getElementById("txtList").innerHTML += "<input type='text'>";
}

变得更像以下

function addTextBox() {
    var textEl = document.getElementById("txtList");
    var input = document.createElement("input");
    input.type = 'text';

    textEl.appendChild(input);
}

Answer 4

当您将innerHTML的附加内容更改为字符串时，会创建另一个字符串（它们是不可变的）。浏览器不得不重新渲染整个事物。

其他答案显示appendChild，但由于您在原始问题中使用了字符串，因此您可能希望继续这样做。如果是这种情况，您可以使用 insertAdjacentHTML 和'beforeend'作为第一个参数。

document
  .getElementById('button')
  .addEventListener('click', () => {
    document.getElementById('txtList')
      .insertAdjacentHTML('beforeend', '<input type="text">');
  });

JSBin link is here.

将文本框添加到div而不会丢失值

4 个答案: