Another Appendchild Not Working In IE

I have a appendChild JS function that works beautifully in all the browsers except IE. I am using a JS array and appending this data to a table. http://jsfiddle.net/2waZ2/51/ Has

Solution 1:

The best way would be to use insertRow :

var row = document.getElementById('mytable').insertRow(-1);
row.innerHTML = displayArrayAsTable(QR4, 24, 25);

As for tBody: Yes, that could be the problem. The browser always generates a tBody element, no matter whether it is specified in the HTML or not.
Maybe you can solve your problem by just appending the new row to this tBody element:

document.getElementById('mytable').tBodies[0].appendChild( row );

But I remember reading that IE had problems with manipulating tables with normal DOM manipulation methods. Whether this applies in this case as well, I don't know. insertRow should work in any case.

Update: Indeed, it seems that IE does not like to append td elements with innerHTML either. A solution would be to pass row also as parameter to displayArrayAsTable and use insertCell to create a new cell.

Update 2: For example you can do it like this:

for ( var x = from; x < to + 1; x++ )
{
    var cell = row.insertCell(-1);
    cell.innerHTML = array[x];
}

where row is a fourth parameter of the function and called as:

var row = document.getElementById('mytable').insertRow(-1);
displayArrayAsTable(QR4, 24, 25, row);