title: Difference Between JQuery .html() method and Javascript .innerHTML = "<div> somediv </div>"?
body: <p>I have done a fair bit of googling and looking at "you might not need jquery" but still haven't been able to figure out what is wrong. </p>
  
  <p>I have a makeTable function that builds up a html string of elements to form a table.  The function works great when I append the output table to the DOM using the Jquery .html method.</p>
  
  <p>Here is the function: </p>
  
  <pre><code>function drawTable () {
    var outputString = '';
    for(var i = 1; i &lt;= 12; i++ ){
      outputString += "&lt;tr&gt;";
      for(var j = 1; j &lt;= 12; j++) {
         outputString += "&lt;td&gt;" + i * j + "&lt;/&gt;";
      }
      outputString += "&lt;/tr&gt;";
    }
    $("#output").html(outputString);
  }
  
  drawTable();
  </code></pre>
  
  <p>However, when I don't use Jquery and I change <code>$("#output").html(outputString);</code> to <code>document.getElementById('output').innerHTML(outputString);</code> the table doesn't render on the page.     I just get a single line of numbers.  When I inspect the element, <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> elements are not being rendered at all and I don't understand why.</p>
  
  <p>I am confused.  How should I render this table in plain JS?  What am I not understanding about the innerHTML method ?  The functions are identical, I am just changing the line where outputString is appended to the DOM and really don't understand why it is not rendering correctly when I attempt to do it in plain JS.  Please enlighten me! </p>