JavaScript Tip: Writing Dynamic Content
What is the difference between the write function and the innerHTML property? There is a huge difference. What happens to any JavaScript you import using these methods? It’s more complicated than you think.
The write() function (as in, document.write), writes text to the “document.” When an HTML page loads, what’s actually happening is a “document” is opened, some content is written to it, and then it is closed. This “document” is the main HTML window that you end up seeing. When a document is opened and written to, everything inside it is cleared out. Let me restate that: if you try to use document.write() after the HTML page has finished loading, you will destroy everything on the page, including the JavaScript tags, all the HTML, and pretty much everything you would see if you hit “view source.” Granted, if you did look at the source, you’d still see the original HTML that was loaded since the “view source” command shows you the originally loaded content, not the result of any JavaScript changes.