title: How to insert row at end of table with HTMLTableElement.insertRow
body: <h3>Background and Setup</h3>
  
  <p>I'm trying to create a table from tabular data in javascript, but when I try inserting rows into a table element, it inserts in the opposite order from what I expect and the opposite order of what you get from using <code>appendChild</code>. (Here's <a href="http://jsfiddle.net/jtratner/9uA9k/" rel="noreferrer">a jsfiddle with a live demo</a> of this).</p>
  
  <p>Say I have some data like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var data = [
      {"a": 1, "b": 2, "c": 3},
      {"a": 4, "b": 5, "c": 6},
      {"a": 7, "b": 8, "c": 9}
  ], keys = ["a", "b", "c"];
  </code></pre>
  
  <p>If I try using the <code>insertRow()</code> and <code>insertCell()</code> methods for creating tables, iterating over the data and keys above. I get the reverse order of what I expect:</p>
  
  <p><img src="https://i.stack.imgur.com/oyjSY.png" alt="InsertRows pic"></p>
  
  <p>Generated by using the following code:</p>
  
  <pre class="lang-js prettyprint-override"><code>// insert a table into the DOM
  var insertTable = insertDiv.appendChild(document.createElement("table")),
      thead = insertTable.createTHead(), // thead element
      thRow = thead.insertRow(), // trow element
      tbody = insertTable.createTBody(); // tbody element
  
  
  thRow.insertCell().innerText = "#"; // add row header
  
  // insert columns
  for (var i = 0, l = keys.length; i &lt; l; i ++) {
      var k = keys[i];
      thRow.insertCell().innerText = k;
  }
  
  // insert rows of data
  for (var i = 0, l = data.length; i &lt; l; i ++) {
      var rowData = data[i],
          row = tbody.insertRow();
      row.insertCell().innerText = i;
      for (var j = 0, l = keys.length; j &lt; l; j ++) {
          var elem = rowData[keys[j]];
          row.insertCell().innerText = elem;
      }
  }
  </code></pre>
  
  <p>Whereas, if I create a table using <code>document.createElement</code> and <code>appendChild</code>, I get the order I would expect:</p>
  
  <p><img src="https://i.stack.imgur.com/Fvp7R.png" alt="AppendChild pic"></p>
  
  <p>Generated by:</p>
  
  <pre class="lang-js prettyprint-override"><code>// now do the same thing, but using appendChild
  var byChildTable = document.createElement("table");
  byChildTable.setAttribute("class", "table");
  thead = byChildTable.appendChild(document.createElement("thead"));
  thRow = thead.appendChild(document.createElement("tr"));
  
  // create table header
  thRow.appendChild(document.createElement("td")).innerText = "#";
  for (var i = 0, l = keys.length; i &lt; l; i ++) {
      var key = keys[i];
      thRow.appendChild(document.createElement("td")).innerText = key;
  }
  
  // insert table data by row
  tbody = byChildTable.appendChild(document.createElement("tbody"));
  for (var i = 0, l = data.length; i &lt; l; i ++) {
      var rowData = data[i],
          row = tbody.appendChild(document.createElement("tr"));
      row.appendChild(document.createElement("td")).innerText = i;
      for (var j = 0, l = keys.length; j &lt; l; j ++) {
          var elem = rowData[keys[j]];
          row.appendChild(document.createElement("td")).innerText = elem;
      }
  }
  </code></pre>
  
  <h3>Question</h3>
  
  <p>How do I control the order it puts the elements in the DOM? Is there any way to change this? I guess otherwise I could iterate in reverse order, but even that way, you still can't insert with <code>table.insertRow()</code>. It's just a bummer because the <code>insertRow()</code> and <code>insertCell()</code> methods seem much clearer than <code>table.appendChild(document.createElement("tr"))</code> etc.</p>