An example: innerHtml - what is destroyed and what is retained?

innerHtml example.md

Consider some html - this is what we want to create:

<div id="start-of-content" class="show-on-focus">
    <p> Setting innerHtml on the #start-of-content element to "" would wipe this msg away </p>   
</div>

(If you're reading this on Github, you can open the dev tools and see the relevant element.)

let contentStart = document.getElementById("start-of-content")
contentStart.onblur = function(){alert("hello world!")}
contentStart.innerHTML = "<p> Setting innerHtml on the #start-of-content element to '' would wipe this msg away </p>";

// In the inspector (using Firefox/Chrome Dev tools) 
// the handler on contentStart is retained (i.e. onblur)

// but any child elements on contentStart would be wiped, 
// as well as their handlers, if contentStart.innerHtml= "" were used.

contentStart.innerHTML = "";

// now we can check in dev tools: the handler is retained, while the contents are wiped.