Wie fügt man mit HTMLTableElement.insertRow eine Zeile am Ende der Tabelle ein?

Hintergrund und Setup

Ich versuche, eine Tabelle aus Tabellendaten in Javascript zu erstellen, aber wenn ich versuche, Zeilen in ein Tabellenelement einzufügen, wird dies in der entgegengesetzten Reihenfolge von dem eingefügt, was ich erwarte, und der umgekehrten Reihenfolge der Verwendung von appendChild. (Hier ist eine jsfiddle mit einer Live-Demo davon).

Angenommen, ich habe einige Daten wie diese:

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

Wenn ich versuche, die Methoden insertRow() und insertCell() zum Erstellen von Tabellen zu verwenden, durchlaufe ich die oben genannten Daten und Schlüssel. Ich bekomme die umgekehrte Reihenfolge von dem, was ich erwarte:

Wird mit folgendem Code generiert:

// 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;
    }
}

Wenn ich mit document.createElement und appendChild eine Tabelle erstelle, erhalte ich die Reihenfolge, die ich erwarten würde:

Erzeugt von:

// 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;
    }
}

Frage

Wie kontrolliere ich die Reihenfolge, in der die Elemente im DOM platziert werden? Gibt es eine Möglichkeit, dies zu ändern? Ich denke, sonst könnte ich in umgekehrter Reihenfolge durchlaufen, aber selbst auf diese Weise können Sie mit table.insertRow() immer noch nicht einfügen. Es ist nur ein Dummkopf, weil die Methoden insertRow() und insertCell() viel klarer erscheinen als table.appendChild(document.createElement("tr")) usw.