Question

我正试图在点击按钮时附加一个新的输入字段。

var div = document.getElementById('row');      
  document.getElementById('create_row').onclick = function (e) {
  div.innerHTML = div.innerHTML + '<input type="text" name="ain[]" placeholder="something..."/>';
}

<div id="row"></div>
<button type="button" id="create_row">button</button>

这似乎工作得很好！但每次按下按钮，添加的字段内容都会消失。

所以，我想留下添加的字段的内容。

帮助！ ㅠ_ㅠ

Answer 1

元素的innerHTML不会因为你在输入字段中输入内容而改变。

因此，当您执行div.innerHTML = div.innerHTML + "something new"时，DIV的内容将与最初的内容相同，加上"something new"。现在innerHTML已经改变了，但是你丢失了所有类型的文本，因为你的输入字段将被丢弃并被替换。

这意味着你应该避免覆盖innerHTML。

改为创建一个新的DOM节点（https://www.atlassian.com/git/tutorials/refs-and-the-reflog#refspecs）并将其附加到DIV。

var div = document.getElementById('row');      
var row = document.getElementById('create_row');

row.onclick = function (e) {
    var newInput = document.createElement("input");
    newInput.type = "text";
    newInput.name = "ain[]";
    newInput.placeholder = "type something...";

    div.appendChild(newInput);
    newInput.focus();
}

#row {
  width: 100px;
}
#row > input {
  display: block;
}

<div id="row"></div>
<button id="create_row">Create Row</button>

如何将新输入字段动态添加到我的页面

1 个答案: