Helpful Information
 
 
Category: DOM and JSON scripting
appendChild and document.createElement

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

 Consider the following:


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:


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

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()



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.

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.

&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

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/domref/dom_html_ref12.html#998953 or http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425 for documentation.

Thanks, it hopefully should solve the problem with NS6/IE6 about
modifying tables and the (?)TBODY(?) tag.

Guardian

*last 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 :

<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/tables.html#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.










privacy (GDPR)