title: JavaScript – Adding table row from top to bottom
body: <p>With JavaScript, I attached functions to two buttons, one of which adds rows to a table. However, I somehow made it to add rows from the bottom, so when you click it, it stacks the rows on top of each other from the top. I'm looking for the table rows to be stacked from top to bottom, so that it increases in length in the bottom, not the top. How do you do this?</p>
  
  <p>In case it's not clear, here's a JSFiddle (I want the rows to appear below the Headers, not above): <a href="http://jsfiddle.net/yvzq03LL/" rel="nofollow">http://jsfiddle.net/yvzq03LL/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;table id="myTable"&gt;
    &lt;tr&gt;
      &lt;td&gt;Header 1&lt;/td&gt;
      &lt;td&gt;Header 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br&gt;
  
  &lt;button onclick="myCreateFunction()"&gt;Create row&lt;/button&gt;
  &lt;button onclick="myDeleteFunction()"&gt;Delete row&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table, td {
    border: 1px solid black;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function myCreateFunction() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "Added row";
      cell2.innerHTML = "Added row";
  }
  
  function myDeleteFunction() {
      document.getElementById("myTable").deleteRow(0);
  }
  </code></pre>