title: Javascript autocloses HTML tags?
body: <p>Why do these two functions give different results?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var table1 = document.getElementById("table1");
  var table2 = document.getElementById("table2");
  
  var register = [
    {att1: 1, att2: 2, att3: 3},
    {att1: 4, att2: 5, att3: 6},
    {att1: 7, att2: 8, att3: 9}
  ];
  
  //table1.innerHTML = "";
  //table2.innerHTML = "";
  
  function drawTable1() {
    for (var i = 0; i &lt; register.length; i++) {
      table1.innerHTML += "&lt;tr&gt;&lt;td&gt;" + register[i].att1 + "&lt;/td&gt;&lt;td&gt;" + register[i].att2 + "&lt;/td&gt;&lt;td&gt;" + register[i].att3 + "&lt;/td&gt;&lt;/tr&gt;";
    }
  }
  
  function drawTable2() {
   for (var i = 0; i &lt; register.length; i++) {
     table2.innerHTML += "&lt;tr&gt;";
      table2.innerHTML += "&lt;td&gt;" + register[i].att1 + "&lt;/td&gt;";
      table2.innerHTML += "&lt;td&gt;" + register[i].att2 + "&lt;/td&gt;";
      table2.innerHTML += "&lt;td&gt;" + register[i].att3 + "&lt;/td&gt;";
      table2.innerHTML += "&lt;/tr&gt;";
    }
  }
  
  drawTable1();
  drawTable2();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Att1&lt;/th&gt;
          &lt;th&gt;Att2&lt;/th&gt;
          &lt;th&gt;Att3&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="table1"&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Att1&lt;/th&gt;
          &lt;th&gt;Att2&lt;/th&gt;
          &lt;th&gt;Att3&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="table2"&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm just beginning with js, and I've noticed this thing. From a logical point of view i see no differences between the two functions, the second has just been broken up to make the code easier to read. It should simply be adding strings to a string, but it seems like at every operation the opened tags get closed by the program, resulting in a multitude of rows.</p>
  
  <p>Why is this? How is this useful?</p>