單擊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>