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.