How to insert row at end of table with HTMLTableElement.insertRow

Question

Background and Setup

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 appendChild. (Here's a jsfiddle with a live demo of this).

Say I have some data like this:

var data = [     {"a": 1, "b": 2, "c": 3},     {"a": 4, "b": 5, "c": 6},     {"a": 7, "b": 8, "c": 9} ], keys = ["a", "b", "c"]; 

If I try using the insertRow() and insertCell() methods for creating tables, iterating over the data and keys above. I get the reverse order of what I expect:

Generated by using the following 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 < l; i ++) {     var k = keys[i];     thRow.insertCell().innerText = k; }  // insert rows of data for (var i = 0, l = data.length; i < l; i ++) {     var rowData = data[i],         row = tbody.insertRow();     row.insertCell().innerText = i;     for (var j = 0, l = keys.length; j < l; j ++) {         var elem = rowData[keys[j]];         row.insertCell().innerText = elem;     } } 

Whereas, if I create a table using document.createElement and appendChild, I get the order I would expect:

Generated by:

// 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 < 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 < 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 < l; j ++) {         var elem = rowData[keys[j]];         row.appendChild(document.createElement("td")).innerText = elem;     } } 

Question

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 table.insertRow(). It's just a bummer because the insertRow() and insertCell() methods seem much clearer than table.appendChild(document.createElement("tr")) etc.

Answer 1

The .insertRow and .insertCell methods take an index. In absence of the index, the default value is -1 in most browsers, however some browsers may use 0 or may throw an error, so it's best to provide this explicitly.

To to an append instead, just provide -1, and an append will be done

var row = table.insertRow(-1); var cell = row.insertCell(-1); 

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow