Regarding the appendChild routine to create new HTML elements.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • vsanjit
    New Member
    • Sep 2007
    • 2

    Regarding the appendChild routine to create new HTML elements.

    Hi all,

    I've been trying to create a table dynamically upon the generation of en event using the appendChild method in Javascript. This seems to work fine in Firefox, but not in IE7. There's also no error message from IE. I'm new to these routines. Could someone shed some light on where I could be going wrong? Here's the code:

    Code:
    <html>
    <head>
    <script type='text/javascript'>
    
    function makeTable()
    {
       
    	
       var nTable=document.createElement('table');
       nTable.setAttribute('id','myTable');
       nTable.setAttribute('border','1');
       
       var nRow1=document.createElement('tr');
       var nData11=document.createElement('td');
       nData11.setAttribute('colspan','2');
       var nCenter11=document.createElement('center');
       var nBold=document.createElement('b');
       nBold.appendChild(document.createTextNode('Title'));
       nCenter11.appendChild(nBold);
       nData11.appendChild(nCenter11);
       nRow1.appendChild(nData11);
       
       var nRow2=document.createElement('tr');
       var nData21=document.createElement('td');
       var nCenter21=document.createElement('center');
      nCenter21.appendChild(document.createTextNode('21'));
      nData21.appendChild(nCenter21);
      var nData22=document.createElement('td');
       var nCenter22=document.createElement('center');
      nCenter22.appendChild(document.createTextNode('22'));
      nData22.appendChild(nCenter22);
      nRow2.appendChild(nData21);
      nRow2.appendChild(nData22);
      
      nTable.appendChild(nRow1);
      nTable.appendChild(nRow2);
      
      alert('Almost there !');
      try
      {
      	 document.getElementById('container').appendChild(nTable);
      }
      catch (e)
      {
        alert(e.message);
      }
      
    
       return;
       
    }
    
    </script>
    </head>
    
    <body>
    <div id='container'>
    </div>
    <br>
    <input type=button value='Go' onclick='makeTable();'>
    </body>
    </html>
    Last edited by Frinavale; Dec 8 '09, 05:10 PM. Reason: Please post code in [code] ... [/code] tags. Added code tags.
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749

    #2
    Hi Vsanjit,

    Welcome to Bytes.
    I have moved your question to the JavaScript forum. I think you will get more help here than in the HTML forum.

    PS. Please use code tags when posting code.

    Good luck

    -Frinny

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      See http://bytes.com/topic/javascript/in...appear-page-ie

      Append the rows to the tbody instead of the table.

      Comment

      Working...