In-page JavaScript stops when I use document.body[removed] += newHtmlText

Question

Does anyone know why if you use document.body.innerHTML += \"content\"; the JavaScript on the page stops working? I have the following code:

Answer 1

document.body.innerHTML += "content"; 

Does three things:

1. Reads the value of innerHTML
2. Modifies that value
3. Overwrites innerHTML with the new value

This deletes the page and then creates a new one.

Since script elements inserted with innerHTML are not executed, this kills the JS.

---

Don't append data using innerHTML. Generate DOM nodes (with createElement, createTextNode and friends) and then append them (with appendChild, insertBefore and so on).