title: Explaining how document.getelementbyid.innerhtml prints text
body: <p>Following other documentation, I have succesfully printed out a text file separated by line.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function readFile()
  {
      var xmlhttp;
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
      else
      {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
  
       xmlhttp.onreadystatechange=function()
       {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
          {
               document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");
          }
       }
  
       xmlhttp.open("GET","OFCaddresses.txt",true);
       xmlhttp.send();
   }
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div id="myDiv"&gt;&lt;h2&gt;"FILE.txt"&lt;/h2&gt;&lt;/div&gt;
   &lt;button type="button" onclick="readFile()"&gt;FILE&lt;/button&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>I am trying to better understand how this works if someone could explain. I understand how they define <code>xmlhttp</code> depending on the browser, but what does</p>
  
  <pre><code>document.getElementById("myDiv").innerHTML=xmlhttp.responseText.split("\n");
  </code></pre>
  
  <p>actually do? Does it change the content of myDiv from the text to the file content? What does <code>onreadystatechange</code> have to do with the button?</p>