Как вставить строку в конец таблицы с помощью HTMLTableElement.insertRow

Фон и настройка

Я пытаюсь создать таблицу из табличных данных в javascript, но когда я пытаюсь вставить строки в элемент таблицы, он вставляет в противоположном порядке от того, что я ожидаю, и противоположный порядок того, что вы получаете от использования appendChild. (Здесь jsfiddle с живой демонстрацией этого).

Скажем, у меня есть некоторые данные:

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

Если я попытаюсь использовать методы insertRow() и insertCell() для создания таблиц, повторяя эти данные и ключи выше. Я получаю обратный порядок того, что ожидаю:

Сгенерировано с использованием следующего кода:

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

В то время как если я создаю таблицу с помощью document.createElement и appendChild, я получаю порядок, который я ожидал бы:

Сгенерировано:

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

Вопрос

Как я могу контролировать порядок, в котором он помещает элементы в DOM? Есть ли способ изменить это? Я предполагаю, что в противном случае я мог бы выполнять итерацию в обратном порядке, но даже так, вы все еще не можете вставить с помощью table.insertRow(). Это просто облом, потому что методы insertRow() и insertCell() выглядят намного яснее, чем table.appendChild(document.createElement("tr")) и т.д.