title: Unclear how document.write() works
body: <p>When I run this, "11" appears on the page immediately followed by "25" followed by 40 <code>&lt;br/&gt;</code> followed by "Finished" so the data written to the page is sort of concatenated. But when I click the button the third <code>document.write()</code> in the <code>writePos()</code> function overwrites everything written outside the scope of the function. Why?    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;input type="button" onclick="runNavigator()"; value="Run Navigator"/&gt;
  &lt;script&gt;
  document.write(5 + 6);
  document.write(12+13);
  for (var i = 0; i&lt;40;i++)
      document.write('&lt;br/&gt;');
  document.write("Finished");
  
  function writePos(position) {
      console.log("writePos");
      var map_url="http://maps.googleapis.com/maps/api/staticmap?center="+position.coords.latitude+","+
      position.coords.longitude + "&amp;zoom=12&amp;size=550x400&amp;sensor=false";
  
      document.write("Latitude: "  + position.coords.latitude + '&lt;br/&gt;');
      document.write("Longitude: " + position.coords.longitude + '&lt;br/&gt;');
      document.write('&lt;br/&gt;&lt;div&gt;&lt;img src="' +map_url+'"/&gt;&lt;/div&gt;');
  }
  
  function runNavigator() {
      navigator.geolocation.getCurrentPosition(writePos);
  }
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>