title: Append element from XML to div, without jQuery
body: <p>EDIT: made title more specific to address duplicate question problem.</p>
  
  <p>I have an HTML page that has a <code>button</code> and a <code>div</code>. When the user clicks the button, a function runs an <code>XMLHttpRequest</code> to get a table from an XML file. The table should be inserted into the <code>div</code>.</p>
  
  <p>The AJAX request returns an <code>object Element</code> to my variable. How can I get the content of that variable (i.e., the <code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;...</code> etc. from the XML file) to insert into the <code>div</code>?</p>
  
  <p>Here's the JavaScript:</p>
  
  <pre><code>function table_loadContent() {
  
      var request;
  
      if (window.XMLHttpRequest) {
  
          request = new XMLHttpRequest();
          console.log("HTTPRequest");
  
      } else {
  
          request = new ActiveXObject("Microsoft.XMLHTTP");
          console.log("ActiveX");
  
      }
  
      request.open('GET', 'myXMLFile.xml');
  
      request.onreadystatechange = function() {
  
          if ((request.readyState === 4) &amp;&amp; (request.status === 200)) {
  
              var newTable = request.responseXML.getElementsByTagName('table');
              document.getElementById('myDiv').appendChild(newTable);
  
          }
  
      }
  
      request.send();
  
  }
  </code></pre>
  
  <p>Variations that I've tried that don't work:</p>
  
  <ul>
  <li><code>document.getElementById("myDiv").innerHTML = myVar;</code></li>
  <li><code>document.getElementById("myDiv").appendChild(myVar);</code></li>
  <li><code>document.getElementById("myDiv").appendChild(myVar[0]);</code></li>
  <li>same as above but using a second variable to hold a <code>.toString()</code> version</li>
  <li>tried declaring the XML file as <code>XML</code> and as <code>HTML</code></li>
  <li><code>var newTable = request.responseXML.getElementById('myTable')</code>;</li>
  </ul>