document.write() overwriting the document?

Question

This:

function myFunction()
{
    document.write("sup");
}

called in html like:

<div id="myDiv">
    <script>myFunction();</script>
</div>t

adds a string sup to the myDiv div element. Which is what I want, exactly. However, this:

function loadFile(uri)
{
    var r = new XMLHttpRequest();
    document.write("trying to open: " + uri);
    r.open('GET', uri, true);
    r.send(null);
    r.onreadystatechange = function()
    {
        if (r.readyState == 4)
        {
            myFunction();
        }
    }
}

function myFunction()
{
    document.write("sup");
}

called like this:

<div id="myDiv">
    <script>loadFile("filename.txt");</script>
</div>

seems to be overwriting my whole html file. I.e. when I run it in Firefox it shows me only the string sup (that's the whole content of the page) but the page seems to be still loading (the loading icon of FF is still there animating, apparently infinitely).

First of all, this is going to be used only locally, offline, as a fast and handy way of presenting data (using html+js and web browser instead of plain text file). What I want is to load a local text file and then put some of its content as a part of the html page. The same as in my first example but with loading the text file first.

Solution 1

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";

Solution 2

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.

Comments

[Blue Skies]

Yes, as you stated, that overwrites the document when called after the page is loaded. If you want to manipulate the existing DOM, you should work through some basic tutorials first. developer.mozilla.org/en-US/learn/javascript

[Eggs]

linstantnoodles explains this document.write so well that you might be tempted to this technique for script injection, but don't use document.write for script injection