The usage of
innerHTML is most likely the most widely spread non standardized DOM feature available today. It was introcuded in IE4 back in 98. Setting
innerHTML parses the string as HTML and replaces the content of the element with the nodes generated by that HTML string. Very useful indeed.
But like most things,
innerHTML has an ugly side that will break the most simple functionality. The problem is that when setting it, it will disconnect any previously existing DOM nodes.
var b = document.getElementById("my-button"); document.body.innerHTML += "<p>Add a paragraph?</p>";
So in the example code above,
b, is no longer part of the document. It has been disconnected and any code that relies on this has stopped working.
Basically, any time you set
innerHTML you have to reinitialize any component that is depending on the DOM nodes you just disconnected.