如果插入iframe，則在插入元素時重置頁面

Question

我有以下HTML：

<div id="main"><div><iframe></iframe></div>
<div>Content</div>
<div>Content</div>
<div id="clickme">Click</div>
</div>

#clickme具有click事件，該事件在其后插入div。 因此，基本上，在單擊#clickme ，結構應如下所示：

<div><div><iframe></iframe></div>
<div>Content</div>
<div>Content</div>
<div id="clickme">Click</div>
<div>Inserted div</div>
</div>

插入div后，頁面似乎加載了一些東西。 在控制台中，看起來iframe正在重新加載（它顯示對iframe中加載的頁面的GET請求）。 這不是什么大問題，但是所有事件都已從元素中刪除，這是一個問題。 我嘗試刪除iframe，問題消失了。 您是否知道這是什么原因？

JS：

document.querySelector("#clickme").addEventListener("click", function(){
document.querySelector("#main").innerHTML+="<div></div>";
})

Answer 1

使用innerHTML的+ =運算符會在連接參數之前將main內部的所有節點轉換為純文本。 之后，它將清除實際節點並應用新呈現的字符串。

我們需要插入新的HTML而不接觸現有的HTML：

document.querySelector("#clickme").addEventListener("click", function(event){
  event.target.insertAdjacentHTML('afterend', '<div>Inserted div</div>');
}

副作用是此代碼將占用更少的時間。