Question

I’m having some weird issues with dynamically populating a table in Javascript. Behold the following:

/**
* Create dynamic table and populate column names
*/
function createTableHeaders() {
    var table = document.getElementById("list-contain").getElementsByTagName("tbody")[0];
    var row = document.createElement('tr');
    table.appendChild(row);
    var th;
    for(var i=0; i<columns.length; i++) {
        th = document.createElement('th');
        th.appendChild(document.createTextNode(columns[i]));
        table.rows[0].appendChild(th);
    }
}

Where “columns” is an array of text strings populated in another section of my code. I’m encountering very specific symptoms:

1. The table is being populated correctly, iterating through all the items in the “columns” array.
2. I’m getting different errors in Firebug (debugger for Firefox) and IE9.

In Firefox, I’m getting a NS_ERROR_INVALID_POINTER on nsIDOMHTMLTableSectionElement.appendChild.

In Internet Explorer 9, I’m getting two errors:

1. SEC7111: HTTPS security is compromised by javascript:void(0)
2. SCRIPT5022: DOM Exception: HIERARCHY_REQUEST_ERR (3)

I think the first IE error is related to something else in my code, but I have no clue why Firefox and IE are giving me different DOM errors. The table is still being populated correctly in both browsers, I can’t tell why they’re throwing these errors yet executing the code correctly.

If anyone has experience/insight in these matters, I would much appreciate the help! 🙂

Answer 1

Problem resolved; the syntax I was using was correct, it turns out another script that I was using to sort the table was bugging out. The table was originally static HTML, and when I generated it using Javascript, the sorting script broke. 🙂