document.write() overwriting the document?

The issue is that when you run document.write after the document has loaded, it overwrites the entire document. If it is run before that, it does not overwrite it.

What you want to do is set the innerHtml of a specific element, something like:

document.getElementById("myDiv").innerHTML="Sup";

Lets go over what a browser does when it receives an html file.

1. The window document is opened for writing. Imagine opening a text file.
2. Browser writes the contents to the document. A lot of magic happens in this step - objects get created and html rendered as boxes.
3. The window document closes the document. Kind of like saving the text file.

Now, modern browsers also expose a document API that allow you to do exactly those tasks using javascript.

You can open a document for writing using document.open(). You can also start writing content to the document using document.write(). Finally, you can close the document for writing using document.close(). Since the document always needs to be opened for writing before you write, calling document.write() always results in an implicit document.open().

Interspersing document.write() calls throughout an html body is a commonly used technique used to insert string contents dynamically into an html page.

For example, if you execute document.write("<p>holla</p>") in the body of an html file, the browser will do the following upon receiving the html file.

1. Open the document for writing.
2. Start writing the html contents to the document.
   • JavaScript engine will execute document.write() when it encounters it and then write "<p>holla</p>" into that specific line in the document, just as if the string was already part of the html file! Since document.write() is called during the parsing of an html file, it just gets parsed as part of the page.
3. Close the document for writing. Parsing complete.

If that's how you use document.write(), there would have been no surprise. Instead, you call document.write() after the html is parsed.

So what do you think should happen?

As I mentioned before, a document needs to be opened for writing before it is written to. In theory, we could either append to the existing content or just overwrite it. Well, if we append to the content, we'll end up with an invalid html page because the new values will appear after the closing tags. So the more sensible behavior is to overwrite the content and that's exactly what happens.