title: document.write() overwriting the document?
body: <p>This:</p>
  <pre><code>function myFunction()
  {
      document.write(&quot;sup&quot;);
  }
  </code></pre>
  <p>called in html like:</p>
  <pre><code>&lt;div id=&quot;myDiv&quot;&gt;
      &lt;script&gt;myFunction();&lt;/script&gt;
  &lt;/div&gt;t
  </code></pre>
  <p>adds a string <code>sup</code> to the <code>myDiv</code> div element. Which is what I want, exactly. However, this:</p>
  <pre><code>function loadFile(uri)
  {
      var r = new XMLHttpRequest();
      document.write(&quot;trying to open: &quot; + uri);
      r.open('GET', uri, true);
      r.send(null);
      r.onreadystatechange = function()
      {
          if (r.readyState == 4)
          {
              myFunction();
          }
      }
  }
  
  function myFunction()
  {
      document.write(&quot;sup&quot;);
  }
  </code></pre>
  <p>called like this:</p>
  <pre><code>&lt;div id=&quot;myDiv&quot;&gt;
      &lt;script&gt;loadFile(&quot;filename.txt&quot;);&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  <p>seems to be overwriting my whole html file. I.e. when I run it in Firefox it shows me only the string <code>sup</code> (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).</p>
  <p>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.</p>