createElement / appendChild not working in IE

[Atli]

Hi everybody.

I'm making a Javascript system to build tables, so I can view large tables in smaller pieces. I use the "document.createElement" and "appendChild" methods to create and remove elements from my table.
Got everything working, no problems. Until I test my code in IE.

After a little investigation, I create this:

<div id="ListContainer" class="Info">
<table id="ListTable">
    <tr>
        <td>Hello</td>
    </tr>
</table>
</div>
 
<script type="text/javascript">
    var table = document.getElementById("ListTable");
    var newRow = document.createElement("tr");
    var newCol = document.createElement("td");
    newCol.innerHTML = "Row2";
    newRow.appendChild(newCol);
    table.appendChild(newRow);
</script>
 

As before, this works in Firefox, which I use to debug my script. But fails in IE.
Weird thing is that IE usually flashes the error icon in the bottom-left corner when a script is broken, but that doesn't happen now.
Nothing happens, no errors, no changes.

I can't find anything wrong with this code.
Anybody know what is going on there?

[gits]

hi ...

i think i remember that in IE you have to use the tablebody (<tbody>) to append rows ... that will work in FF/Moz too ... so you don't need a different code ... just extend it ... :)

kind regards

[Atli]

Ahhh, yet another brilliant IE feature!

Just added a <tbody> element between my table and the new rows and everything started working perfectly.

Thanks mate :)

[gits]

hi Atli ...

in this case i think IE handles the table quite strict ... while the other browsers do not ... have a look here ...

kind regards

[Atli]

That's interesting.

I wonder tho. If you take a look further down the page, you can see that the examples there don't use the <theader>, <tfooter> and <tbody> elements.
Wonder if they should be optional rather than required as IE handles them.

Lots of other interesting stuff there to.
Thanks mate.

[gits]

as far as i understood ... browsers should be able to handle it gracefully for backwards-compatibility so IE's strict handling is really strange behaviour ... especially since it handles other things not the strict way ... the good news are: the other browsers can handle it too so we don't need to code twice ;) ... or need some workarounds this time ... while discovering it, it seems to be silly but once you know then you may handle it very straight :) ...

kind regards

[acoder]

Yes, IE's strict handling in this case is indeed strange. I think, though, that it is problematic simply because of the number of hours spent figuring out what the problem might be as well as the sore foreheads, damaged keyboards and grey hairs!

[gits]

Yes, IE's strict handling in this case is indeed strange. I think, though, that it is problematic simply because of the number of hours spent figuring out what the problem might be as well as the sore foreheads, damaged keyboards and grey hairs!

yes ... i agree ... or simply ask here in the forum to avoid that :)

[acoder]

I've documented this and other quirky or outright buggy behaviour in Browser Bugs, Quirks and Inconsistencies.

[mumf83]

Hello,

I've been having problems with appendChild on IE. Everything works on other browsers. I found this thread and amended my script to what has been explained above, by adding a <tbody> but it still doesn't work in IE. the code is below. can anyone spot anything I'm doing wrong..?

My Ajax code:

        for(var i=0; i<_post.length; i++)
        {
            rank++;
            var _time = response.getElementsByTagName('time')[i].firstChild.data;
            var _name = response.getElementsByTagName('name')[i].firstChild.data
 
            var tb= document.getElementById('posts');                
            var tr = document.createElement('TR');    
            tb.appendChild(tr);
            var td = document.createElement('TD');
            tr.appendChild(td);
            td.innerHTML= rank;
            var td2 = document.createElement('TD');
            tr.appendChild(td2);
            td2.innerHTML= _name;
            var td3 = document.createElement('TD');
            tr.appendChild(td3);
            td3.innerHTML= _time;
        }
 

and my HTML code:

    <TABLE style='float:left' border='1' id='rankingTable'>
    <TR><TH COLSPAN='3'>Top 100</TH></TR>
    <TR><TH>#</TH><TH>Name</TH><TH>Score</TH></TR>
 
    <tbody id='posts'>
    </tbody>
 
    </TABLE>
 

Hope to here from someone soon?

[acoder]

First of all, welcome to Bytes!

Now, onto your question: whenever you use createElement and appendChild, start off by creating the elements in parent to child order and then append them in reverse order, i.e. from child to parent. For example, your code becomes:

var tb= document.getElementById('posts');                
var tr = document.createElement('TR');    
var td = document.createElement('TD');
td.innerHTML= rank;
var td2 = document.createElement('TD');
td2.innerHTML= _name;
var td3 = document.createElement('TD');
td3.innerHTML= _time;
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tb.appendChild(tr);
 

[jcumoletti]

tables have there own dom functions

row = table.insertRow()
cell = row.insertCell()

both functions take params for where the index should be
functions work in both IE and FF

[gits]

yes that is right ... for a comparison of compat-issues with different dom-operations you may have a look here ...

kind regards

[jravi96]

@gits, thanks for your suggestion , it helped me in solving the same problem