By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,009 Members | 2,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,009 IT Pros & Developers. It's quick & easy.

createElement / appendChild not working in IE

Atli
Expert 5K+
P: 5,058
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:
Expand|Select|Wrap|Line Numbers
  1. <div id="ListContainer" class="Info">
  2. <table id="ListTable">
  3.     <tr>
  4.         <td>Hello</td>
  5.     </tr>
  6. </table>
  7. </div>
  8.  
  9. <script type="text/javascript">
  10.     var table = document.getElementById("ListTable");
  11.     var newRow = document.createElement("tr");
  12.     var newCol = document.createElement("td");
  13.     newCol.innerHTML = "Row2";
  14.     newRow.appendChild(newCol);
  15.     table.appendChild(newRow);
  16. </script>
  17.  
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?
Jan 21 '08 #1
Share this Question
Share on Google+
13 Replies


gits
Expert Mod 5K+
P: 5,330
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
Jan 21 '08 #2

Atli
Expert 5K+
P: 5,058
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 :)
Jan 22 '08 #3

gits
Expert Mod 5K+
P: 5,330
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
Jan 22 '08 #4

Atli
Expert 5K+
P: 5,058
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.
Jan 22 '08 #5

gits
Expert Mod 5K+
P: 5,330
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
Jan 22 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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!
Jan 23 '08 #7

gits
Expert Mod 5K+
P: 5,330
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 :)
Jan 23 '08 #8

acoder
Expert Mod 15k+
P: 16,027
I've documented this and other quirky or outright buggy behaviour in Browser Bugs, Quirks and Inconsistencies.
Jan 23 '08 #9

P: 1
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:
Expand|Select|Wrap|Line Numbers
  1.         for(var i=0; i<_post.length; i++)
  2.         {
  3.             rank++;
  4.             var _time = response.getElementsByTagName('time')[i].firstChild.data;
  5.             var _name = response.getElementsByTagName('name')[i].firstChild.data
  6.  
  7.             var tb= document.getElementById('posts');                
  8.             var tr = document.createElement('TR');    
  9.             tb.appendChild(tr);
  10.             var td = document.createElement('TD');
  11.             tr.appendChild(td);
  12.             td.innerHTML= rank;
  13.             var td2 = document.createElement('TD');
  14.             tr.appendChild(td2);
  15.             td2.innerHTML= _name;
  16.             var td3 = document.createElement('TD');
  17.             tr.appendChild(td3);
  18.             td3.innerHTML= _time;
  19.         }
  20.  
and my HTML code:

Expand|Select|Wrap|Line Numbers
  1.     <TABLE style='float:left' border='1' id='rankingTable'>
  2.     <TR><TH COLSPAN='3'>Top 100</TH></TR>
  3.     <TR><TH>#</TH><TH>Name</TH><TH>Score</TH></TR>
  4.  
  5.     <tbody id='posts'>
  6.     </tbody>
  7.  
  8.     </TABLE>
  9.  
Hope to here from someone soon?
Apr 17 '08 #10

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. var tb= document.getElementById('posts');                
  2. var tr = document.createElement('TR');    
  3. var td = document.createElement('TD');
  4. td.innerHTML= rank;
  5. var td2 = document.createElement('TD');
  6. td2.innerHTML= _name;
  7. var td3 = document.createElement('TD');
  8. td3.innerHTML= _time;
  9. tr.appendChild(td);
  10. tr.appendChild(td2);
  11. tr.appendChild(td3);
  12. tb.appendChild(tr);
  13.  
Apr 17 '08 #11

P: 6
tables have there own dom functions
Expand|Select|Wrap|Line Numbers
  1. row = table.insertRow()
  2. cell = row.insertCell()
both functions take params for where the index should be
functions work in both IE and FF
Apr 22 '08 #12

gits
Expert Mod 5K+
P: 5,330
yes that is right ... for a comparison of compat-issues with different dom-operations you may have a look here ...

kind regards
Apr 22 '08 #13

P: 2
@gits, thanks for your suggestion , it helped me in solving the same problem
Mar 14 '12 #14

Post your reply

Sign in to post your reply or Sign up for a free account.