Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you solved it, here is why it happened. The iframes technically didn't refresh, they were destroyed and then recreated.</p> <p>When you set <code>innerHTML</code>, you remove all the existing nodes inside an element, and then generate new nodes based on the HTML snippet you inserted. Try the following experiment.</p> <pre><code>&lt;div id="el"&gt;&lt;button&gt;My Button&lt;/button&gt;&lt;/div&gt; &lt;script&gt; var myElement = document.getElementById('el'); var button = myElement.firstChild; myElement.innerHTML = myElement.innerHTML; console.log(button); console.log(myElement.firstChild); console.log(button == myElement.firstChild); console.log(button.parentNode); &lt;/script&gt; </code></pre> <p>Here, you see we have a <code>&lt;div&gt;</code> holding a <code>&lt;button&gt;</code>. We store the button as a variable and then "reload" the inner HTML. In the first two lines of the log the elements look the same, but they are actually two different nodes. This is evidenced by the fact that line 3 returns false, showing they are different and line 4 shows that <code>button</code> doesn't have a parent node. It is just sitting in memory because we have a reference to it.</p> <p>As you discovered, the non-destructive way to change an element's children is with DOM methods. You can use <code>appendChild</code> to add an element at the end or <code>insertBefore</code> to insert a child at a different position. Newer browsers support a method called <code>insertAdjacentHTML</code> which does what you were originally planning, create HTML from a string and non-destructively insert it at the end of a node. I don't think support is quite there yet, though, and the other DOM methods are much more well understood.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload