www.webdeveloper.com
Results 1 to 12 of 12

Thread: appendChild in IE vs Firefox

  1. #1
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

    Thumbs up appendChild in IE vs Firefox

    Simple, this works in Internet Explorer but not in Firefox, how do I get this to work in IE?
    Code:
    <html>
    <head>
    <title>paintPixel()</title>
    <script type="text/javascript">
    function paintPixel() {
     var t = document.createElement("table");
     t.width = arguments[0];
     t.height = arguments[1];
     t.cellpadding=0;
     t.cellspacing=0;
     t.border=0;
    var tr;
     for (var i=0; i<arguments[1]; i++) {
      tr = document.createElement("tr");
      for (var j=0; j<arguments[0]; j++) {
       var td = document.createElement("td");
       td.bgColor = "red"
       td.width = 5;
       td.height = 5;
      tr.appendChild(td);
      }
      t.appendChild(tr);
     }
     document.body.appendChild(t);
    alert(document.body.innerHTML)
    }
    
    onload=function(){
    paintPixel(2,2);
    }
    </script>
    </head>
    <body></body>
    </html>
    Last edited by Ultimater; 07-10-2005 at 06:18 AM.

  2. #2
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    I should also point-out that by replacing the alert with document.write the table shows properly on the second page. Any help on this matter will be of great help. Extra credit to anyone that can explain IE's weird behavior -- I'm guessing a glitch.

  3. #3
    Join Date
    Jul 2004
    Posts
    46
    IE requires the 'tbody' to be created and appended...

    Code:
    <html>
    <head>
    <title>paintPixel()</title>
    <script type="text/javascript">
    function paintPixel()
    {	var t = document.createElement("table");
    	var tb=document.createElement("tbody");
     	t.width = arguments[0];
     	t.height = arguments[1];
     	t.cellpadding=0;
     	t.cellspacing=0;
     	t.border=0;
     	for (var i=0; i<arguments[1]; i++) 
    	{	var tr = document.createElement("tr");
      		for (var j=0; j<arguments[0]; j++)
    			{	var td = document.createElement("td");
       				td.bgColor="red';
       				td.width=5;
       				td.height=5;
      				tr.appendChild(td);
      			}
    		tb.appendChild(tr);
      		t.appendChild(tb);
     	}
     	document.body.appendChild(t);
    	alert(document.body.innerHTML)
    }
    
    onload=function(){paintPixel(3,2);}
    </script>
    </head>
    <body></body>
    </html>

  4. #4
    Join Date
    Dec 2002
    Location
    Taiwan
    Posts
    1,297
    If you used the DOM table methods the tbody would be created automatically.
    http://www.howtocreate.co.uk/tutoria...?tut=0&part=26

  5. #5
    Join Date
    Jul 2004
    Posts
    46
    Exuro:
    If you used the DOM table methods the tbody would be created automatically.
    http://www.howtocreate.co.uk/tutori...p?tut=0&part=26
    The 'DOM table methods' example you reference uses the 'tbody' collection to manipulate the table. I don't see the difference.
    Although optional (as well as the HTML and BODY tags) the TBODY tag has not been deprecated.

    Code:
    Adding a row to a table
    
    var theTable = document.getElementById('tableId');
    theTable.tBodies[0].appendChild(document.createElement('tr'));
    
    Adding one cell to every row in a table (assuming it also has a thead and tfoot)
    
    var theTable = gocument.getElementById('tableId');
    for( var x = 0; x < theTable.tHead.rows.length; x++ ) {
    	var y = document.createElement('td');
    	y.appendChild(document.createTextNode('Thead cell text'));
    	theTable.tHead.rows[x].appendChild(y);
    }
    for( var z = 0; z < theTable.tBodies.length; z++ ) {
    	for( var x = 0; x < theTable.tBodies[z].rows.length; x++ ) {
    		var y = document.createElement('td');
    		y.appendChild(document.createTextNode('Tbody cell text'));
    		theTable.tBodies[z].rows[x].appendChild(y);
    	}
    }
    for( var x = 0; x < theTable.tFoot.rows.length; x++ ) {
    	var y = document.createElement('td');
    	y.appendChild(document.createTextNode('Tfoot cell text'));
    	theTable.tFoot.rows[x].appendChild(y);
    }

  6. #6
    Join Date
    Jul 2004
    Posts
    986
    Quote Originally Posted by stymie
    IE requires the 'tbody' to be created and appended...
    Just to point out I mentioned this in response to Ultimater's request here:
    http://www.webdeveloper.com/forum/sh...2&postcount=16

    And FWIW...
    TBODY is not created automatically when creating tables dynamically...
    This phenomena only occurs if the table is already present at runtime...

    .....Willy

  7. #7
    Join Date
    Jul 2004
    Posts
    46
    Sorry Willy,

    That thread got past me...

    stymie

  8. #8
    Join Date
    Dec 2002
    Location
    Taiwan
    Posts
    1,297
    Quote Originally Posted by stymie
    The 'DOM table methods' example you reference uses the 'tbody' collection to manipulate the table. I don't see the difference.
    Although optional (as well as the HTML and BODY tags) the TBODY tag has not been deprecated.
    You're right, that example really isn't any different. However, if you look up the HTMLTableElement DOM2 Interface, you'll see that you can manipulate all of the rows in a table using only the reference to the <table> element. If you use methods like insertRow() on a dynamically-created table, it will automatically create a <tbody> for you, and you can access the new rows using the table.rows collection. There's one catch though. I've found that if you create a <thead> or <tfoot> before appending rows you want in the <tbody>, then your rows will be appended to one of those table section elements instead and no <tbody> is created. The simple workaround for this is to make all your DOM manipulations to your normal rows before doing anything with the <thead> or <tfoot>.

  9. #9
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Thanks guys, it needed a TBODY like Willy and stymie suggested, it's working now.

  10. #10
    Join Date
    Jul 2004
    Posts
    46
    As an alternative to creating the 'tbody' tag, you could try the 'insertRow()' method as Exuro suggested. It automatically creates the 'tbody' tag and works in IE and FF.
    Code:
    <html>
    <head>
    <title>paintPixel()</title>
    <script type="text/javascript">
    function paintPixel()
    {	var t = document.createElement("table");
    	t.style.width = arguments[0];
     	t.style.height = arguments[1];
     	t.cellpadding=0;
     	t.cellspacing=0;
     	t.style.border=0;
     	for (var i=0; i<arguments[1]; i++) 
    	{	var tr = t.insertRow(-1);
      		for (var j=0; j<arguments[0]; j++)
    		{	var td = tr.insertCell(-1);
       			td.style.backgroundColor='red';
       			td.style.width=1;
       			td.style.height=6;
      		}
    	}
     	document.body.appendChild(t);
    	alert(document.body.innerHTML)
    }
    onload=function(){paintPixel(3,3);}
    </script>
    </head>
    <body></body>
    </html>

  11. #11
    Join Date
    Jul 2004
    Posts
    986
    Well, you learn something new everyday...
    I was not aware that insertRow and insertCell were cross-browser compatable, and/or automagically created a TBODY... Although, I believe I will stick with createElement... It's good to learn new things...

    .....Willy

    BTW: This forum needs a thumbs up icon...

  12. #12
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Quote Originally Posted by Willy Duitt
    BTW: This forum needs a thumbs up icon...
    Done.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles