title: InnerHTML append instead of replacing
body: <p>I'm using this code to update a <code>div</code> with an AJAX request</p>
  
  <pre><code>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("some_id").innerHTML += xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET", "http://example.com/");
  xmlhttp.setRequestHeader('Content-Type', 'utf8');
  xmlhttp.send();
  </code></pre>
  
  <p>Everything works fine, the problem is that when the <code>div</code> with id <code>some_id</code> has a lot of content in it i can see the content disappearing and then appearing updated after the AJAX request has been executed.</p>
  
  <p>I think that it's because</p>
  
  <pre><code>document.getElementById("some_id").innerHTML += xmlhttp.responseText;
  </code></pre>
  
  <p>Is deleting and replacing the <code>innerHTML</code> of the <code>div</code> with the previous <code>innerHTML</code> plus the new content, resulting in a <code>previous content → blank → updated content</code> behaviour.</p>
  
  <p>Is there a way to <em>append</em> the new content to the <code>div</code> instead of replacing its whole content with the new one?</p>