单击JavaScript按钮应将输入字段附加到其自己的div

Question

如果我使用innerHTML+=附加一个新的输入字段，我会遇到EventListeners麻烦，因为我猜有一个缓存问题。

<div id="frame">

  <input type="button"  id="btn"/>

</div>

JS

   document.getElementById("btn").addEventListener("click",function(){
       divframe.innerHTML+="  <input ... />..."
   });

我只是想如果用户一遍又一遍地按下按钮，就会有一个新的输入和按钮。（带有自己的EventListeners-现在没有必要了。）

Answer 1

不用使用innerHTML而是使用appendChild，因此第一个和以下按钮不会丢失其事件，对于新元素，您可以添加onclick事件：

<div id="frame">
  <input type="button" value="Add" class="addBtn">
</div>
<script>function appendBtn(){
    var newBtn = document.createElement("input");
  newBtn.onclick = appendBtn;
  newBtn.value = "Add";
  newBtn.classname = "addBtn";
  newBtn.type = "button"
    document.getElementById("frame").appendChild(newBtn);
}

document.getElementsByClassName("addBtn")[0].addEventListener("click",function(){
    appendBtn()
})</script>

Answer 2

您必须创建元素，然后将元素追加到div中。 您可以尝试以下方法：

document.getElementById("btn").addEventListener("click", function() {  
  var div = document.getElementById("frame");   
  var input = document.createElement("INPUT");   
  div.appendChild(input); 
});

希望这会有所帮助！

Answer 3

divframe.innerHTML+=...重写内部HTML并从子元素中删除事件侦听器（如果有）。 您需要再次添加addEventListener 。 下面是（无用但有效的）代码。 请注意，只有第一个按钮保持可单击状态，因为getElementById仅返回具有相同ID的一个（第一个）元素。 正如在其他答案中所说的那样，最好使用appendChild 。

 var divFrame=document.getElementById('frame'); function setListener(){ document.getElementById('btn').addEventListener('click', function(){ divFrame.innerHTML+=divFrame.innerHTML; setListener(); }); } setListener(); 

 <div id="frame"> <input type="button" id="btn" value="click" /> </div>