如果插入iframe，则在插入元素时重置页面

Question

I have the following HTML:

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

#clickme has a click event that inserts a div after it. So basically after clicking on #clickme , the structure should be like this:

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

After the div is inserted, the page seems to load something. In the console, it looks like the iframe is reloading(it show a GET request to the page that is loaded in the iframe). This would not be so big of a problem, but all the events are removed from elements, which is a problem. I tried removing the iframe and the problem disappeared. Do you have any idea about what causes this?

The JS:

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

Answer 1

The += operator with innerHTML causes a conversion of all the nodes inside of main into plain text before concatenating the argument. Afterwards it clears the actual node and applies the newly rendered string.

We need to insert the new HTML without touching the existing:

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

Es a side effect this code will consume less time.