Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    appendChild and document.createElement

     I have another question that has to do with the DOM, so
    here goes:

     Consider the following:
    Code:
    var objTD = document.createElement ("td")
    var objTR = document.createElement ("tr")
    var objTbl = document.createElement ("table")
    //let's just ignore the fact that in IE there's a TBODY ?tag? inside of the TABLE tag
    //now, let's do this:
    
    for (m=0; m<8; m++) {
      objTR.appendChild (objTD)
    }
    for (i=0; i<8; i++) {
      objTbl.appendChild (objTR)
    }
    document.body.appendChild (objTbl)
    Should it work? I think so, but every time you append a child, the
    variable containing it dissappears?!

    So it ends up like this:
    Code:
    var objTbl = document.createElement ("table")
    //let's just ignore the fact that in IE there's a TBODY ?tag? inside of the TABLE tag
    //now, let's do this:
    
    for (m=0; m<8; m++) {
    var objTD = document.createElement ("td")
      objTR.appendChild (objTD)
    }
    for (i=0; i<8; i++) {
    var objTR = document.createElement ("tr")
      objTbl.appendChild (objTR)
    }
    document.body.appendChild (objTbl)
    It works! But I don't know why...

    Any thoughts or answers?

    Guardian

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: appendChild and document.createElement

    Code:
    
    var objTD = document.createElement ("td")
    var objTR = document.createElement ("tr")
    var objTbl = document.createElement ("table")
    //let's just ignore the fact that in IE there's a TBODY ?tag? inside of the TABLE tag
    //now, let's do this:
    
    for (m=0; m<8; m++) {
      objTR.appendChild (objTD)
    }
    for (i=0; i<8; i++) {
      objTbl.appendChild (objTR)
    }
    document.body.appendChild (objTbl)
    
    This appends the same instance of objTD 8 times in objTR. Thus, there will be no 8 objTD's. If you want to do it that way, you should use method cloneNode()

    Code:
    
    var objTbl = document.createElement ("table")
    //let's just ignore the fact that in IE there's a TBODY ?tag? inside of the TABLE tag
    //now, let's do this:
    
    for (m=0; m<8; m++) {
    var objTD = document.createElement ("td")
      objTR.appendChild (objTD)
    }
    for (i=0; i<8; i++) {
    var objTR = document.createElement ("tr")
      objTbl.appendChild (objTR)
    }
    document.body.appendChild (objTbl)
    
    This creates every time (in a loop) a new private object objTD, which is appended to objTR. However, you can't refer to them later.
    Zvona
    First Aid for
    Web Design

  • #3
    Rok
    Rok is offline
    New Coder
    Join Date
    Sep 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When you create an element using dom, you actually create it. And when you append it, you apend the element, not the reference. You don't copy it, you "move" it.

    That's why DOM has supports the cloneNode() method.

    The second code is right.
    In the first one, you move your element, that you have created using createElement() with every iteration, you do not delete it.

    Just stick to the second code, there's nothing wrong with it.

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    &nbsp;So in effect, I'm "giving birth" to a new element, and then moving
    the element to the desired place. So in the second instance of code,
    I'm "giving birth" to another element called by the same
    name, in effect orphaning the old child in order to have a duplicate
    (at least until I modify the attributes) of it with the same name!

    Thanks!

    Guardian
    Last edited by Guardian23; 09-18-2002 at 01:27 AM.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For table elements, there are some special DOM methods and properties you can use like createTHead(), insertRow(), deleteRow(), insertCell(), etc. - instead of the generic DOM node methods like createElement(), appendChild() or removeChild(). These make it much easier to work with tables.

    See http://www.mozilla.org/docs/dom/domr...12.html#998953 or http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-64060425 for documentation.

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it hopefully should solve the problem with NS6/IE6 about
    modifying tables and the (?)TBODY(?) tag.

    Guardian

    *last post*

  • #7
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    Originally posted by Guardian23
    Thanks, it hopefully should solve the problem with NS6/IE6 about
    modifying tables and the (?)TBODY(?) tag.

    Guardian

    *last post*
    About THEAD-TFOOT-TBODY structurization :

    It has been in use for a long time, but not many of the designers has been aware of that. When you create a table with DOM, TBODY is appended in structure by default.

    Correct structure for HTML is :
    Code:
    <table>
    	<thead>
    		<tr>
    			<th>This is a header</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<td>This is a footer</td>
    		</tr>
    	</tfoot>
    	<tbody>
    		<tr>
    			<td>This is a body</td>
    		</tr>
    	</tbody>
    </table>
    Why does footer come before body section..this is the tricky, but sensible part.

    Origin : http://www.w3.org/TR/html401/struct/...tml#edef-TFOOT

    TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
    Zvona
    First Aid for
    Web Design


  •  

    Posting Permissions

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