createElement / appendChild not working in IE

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Atli
    Recognized Expert Expert
    • Nov 2006
    • 5062
    #1

    createElement / appendChild not working in IE

    Hi everybody.

    I'm making a Javascript system to build tables, so I can view large tables in smaller pieces. I use the "document.creat eElement" and "appendChil d" 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:
    [code=javascript]
    <div id="ListContain er" class="Info">
    <table id="ListTable" >
    <tr>
    <td>Hello</td>
    </tr>
    </table>
    </div>

    <script type="text/javascript">
    var table = document.getEle mentById("ListT able");
    var newRow = document.create Element("tr");
    var newCol = document.create Element("td");
    newCol.innerHTM L = "Row2";
    newRow.appendCh ild(newCol);
    table.appendChi ld(newRow);
    </script>
    [/code]
    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?
    Tags: createelement("theader");
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      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

        Comment

        • Atli
          Recognized Expert Expert
          • Nov 2006
          • 5062
          #3
          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 :)

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              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

                Comment

                • Atli
                  Recognized Expert Expert
                  • Nov 2006
                  • 5062
                  #5
                  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.

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      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

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          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!

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5390
                              #8
                              Originally posted by 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!
                              yes ... i agree ... or simply ask here in the forum to avoid that :)

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  I've documented this and other quirky or outright buggy behaviour in Browser Bugs, Quirks and Inconsistencies.

                                    Comment

                                    • mumf83
                                      New Member
                                      • Apr 2008
                                      • 1
                                      #10
                                      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:
                                      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:

                                      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?

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          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:
                                          [CODE=javascript]
                                          var tb= document.getEle mentById('posts ');
                                          var tr = document.create Element('TR');
                                          var td = document.create Element('TD');
                                          td.innerHTML= rank;
                                          var td2 = document.create Element('TD');
                                          td2.innerHTML= _name;
                                          var td3 = document.create Element('TD');
                                          td3.innerHTML= _time;
                                          tr.appendChild( td);
                                          tr.appendChild( td2);
                                          tr.appendChild( td3);
                                          tb.appendChild( tr);
                                          [/CODE]

                                            Comment

                                            • jcumoletti
                                              New Member
                                              • Apr 2008
                                              • 6
                                              #12
                                              tables have there own dom functions
                                              [CODE=javascript]row = table.insertRow ()
                                              cell = row.insertCell( )[/CODE]
                                              both functions take params for where the index should be
                                              functions work in both IE and FF
                                              Last edited by gits; Apr 22 '08, 08:48 PM. Reason: added code tags

                                                Comment

                                                • gits
                                                  Recognized Expert Moderator Expert
                                                  • May 2007
                                                  • 5390
                                                  #13
                                                  yes that is right ... for a comparison of compat-issues with different dom-operations you may have a look here ...

                                                  kind regards

                                                    Comment

                                                    • jravi96
                                                      New Member
                                                      • Mar 2012
                                                      • 2
                                                      #14
                                                      Thanks for suggestion

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

                                                        Comment

                                                        Previous template Next
                                                        Working...