working with the DOM

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
krraleigh
Forum Commoner
Posts: 86
Joined: Tue Jul 17, 2007 2:52 pm

working with the DOM

Post by krraleigh »

I am working with the DOM:
nextSibling, parentNode, firstChild etc for the first time
And I am trying to understand why when i create the variable:
var td = document.createElement("td");

that it will fail to replicate itself more than once when I use it repeatedly.
If your not following take a look at this code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<script type="text/javascript" language="javascript1.5">
var tableE = document.createElement("table");
var theadE = document.createElement("thead");
var tbodyE = document.createElement("tbody");
var trowE1 = document.createElement("tr");
var td = document.createElement ("td");
var tdTextNode1 = document.createTextNode ("Car");
var tdTextNode2 = document.createTextNode ("Top Speed");
var tdTextNode3 = document.createTextNode ("Price");
var tdTextNode4 = document.createTextNode ("Chevrolet");
var tdTextNode5 = document.createTextNode ("120 mph");
var tdTextNode6 = document.createTextNode ("$10,000");
var tdTextNode7 = document.createTextNode ("Pontiac");
var tdTextNode8 = document.createTextNode ("140 mph");
var tdTextNode9 = document.createTextNode ("$20,000");
var docNav;
 
docNav = document.documentElement; //HTML
docNav = docNav.lastChild; //Body
docNav.appendChild(tableE); //add table
docNav = docNav.lastChild; //Table
docNav.appendChild(theadE); //add thead
docNav = docNav.firstChild; //THead
docNav.appendChild(trowE1); // add TR
docNav = docNav.firstChild;
docNav.appendChild(td);  //   this is the section that fails
docNav.appendChild(td);  //   NOTE: that I use the same variable for each call
docNav.appendChild(td);  //   In the next section of code I use a different variable for each call
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode1);
docNav = docNav.nextSibling; //====
docNav.appendChild(tdTextNode2);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode3); 
docNav = docNav.parentNode; //tr
docNav = docNav.parentNode; //thead
docNav = docNav.parentNode; //table
docNav.appendChild(tbodyE);
docNav = docNav.lastChild;
docNav.appendChild(trowE1);
docNav = docNav.lastChild;
docNav.appendChild(td);   
docNav.appendChild(td);   
docNav.appendChild(td);   
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode4);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode5);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode6);
docNav = docNav.parentNode; //tr
docNav = docNav.parentNode; //tbody
docNav.appendChild(trowE);
docNav = docNav.lastChild;
docNav.appendChild(td);
docNav.appendChild(td);
docNav.appendChild(td);
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode7);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode8);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode9);
</script>
</body>
</html>
 
What you will see in the above code is that I use one variable for the <td> and <tr> element to get the work done. This dosen't work; it crashes everytime.

However when I create a separate variable for each <td> and <tr> element
everything works great. See the following code:

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<script type="text/javascript" language="javascript1.5">
var tableE = document.createElement("table");
var theadE = document.createElement("thead");
var tbodyE = document.createElement("tbody");
var trowE1 = document.createElement("tr");
var trowE2 = document.createElement("tr");
var trowE3 = document.createElement("tr");
var tdE1 = document.createElement ("td");
var tdE2 = document.createElement ("td");
var tdE3 = document.createElement ("td");
var tdE4 = document.createElement ("td");
var tdE5 = document.createElement ("td");
var tdE6 = document.createElement ("td");
var tdE7 = document.createElement ("td");
var tdE8 = document.createElement ("td");
var tdE9 = document.createElement ("td");
var tdTextNode1 = document.createTextNode ("Car");
var tdTextNode2 = document.createTextNode ("Top Speed");
var tdTextNode3 = document.createTextNode ("Price");
var tdTextNode4 = document.createTextNode ("Chevrolet");
var tdTextNode5 = document.createTextNode ("120 mph");
var tdTextNode6 = document.createTextNode ("$10,000");
var tdTextNode7 = document.createTextNode ("Pontiac");
var tdTextNode8 = document.createTextNode ("140 mph");
var tdTextNode9 = document.createTextNode ("$20,000");
var docNav;
 
docNav = document.documentElement; //HTML
docNav = docNav.lastChild; //Body
docNav.appendChild(tableE); //add table
docNav = docNav.lastChild; //Table
docNav.appendChild(theadE); //add thead
docNav = docNav.firstChild; //THead
docNav.appendChild(trowE1); // add TR
docNav = docNav.firstChild;
docNav.appendChild(tdE1);
docNav.appendChild(tdE2);
docNav.appendChild(tdE3);
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode1);
docNav = docNav.nextSibling; //====
docNav.appendChild(tdTextNode2);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode3); 
docNav = docNav.parentNode; //tr
docNav = docNav.parentNode; //thead
docNav = docNav.parentNode; //table
docNav.appendChild(tbodyE);
docNav = docNav.lastChild;
docNav.appendChild(trowE2);
docNav = docNav.lastChild;
docNav.appendChild(tdE4);
docNav.appendChild(tdE5);
docNav.appendChild(tdE6);
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode4);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode5);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode6);
docNav = docNav.parentNode; //tr
docNav = docNav.parentNode; //tbody
docNav.appendChild(trowE3);
docNav = docNav.lastChild;
docNav.appendChild(tdE7);
docNav.appendChild(tdE8);
docNav.appendChild(tdE9);
docNav = docNav.firstChild;
docNav.appendChild(tdTextNode7);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode8);
docNav = docNav.nextSibling;
docNav.appendChild(tdTextNode9);
</script>
</body>
</html>
 
Now just for the heck of it I changed things up a bit.
I tried to rewrite the code this way and it works great.

Code: Select all

 
docNav.appendChild(document.createElement("td"));
docNav.appendChild(document.createElement("td"));
docNav.appendChild(document.createElement("td"));
 
So to sum things up.
In the first section of code I created one variable with the following attribute:
var td = document.createElement("td");

I tried to call this variable to populate my html tree on 9 occasions and it
the code fails miserably

In the next section of code I created one variable for each of the <td> and <tr>
elements and the code works perfectly

var tdE1 = document.createElement ("td");
var tdE2 = document.createElement ("td");
var tdE3 = document.createElement ("td");

In the last section of code I didn't create a variable for the <td> element; instead
I hard coded the value directly into appendChild().

My problem here is that it seems incredibly difficult to create a tree if I have to go about hard coding the values for each tree element, or even worse if I have to create a new variable for every element in my <html> tree.

Am I missing something here?
What gives?

thanx
Kevin
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: working with the DOM

Post by kaszu »

document.createElement creates a single element, which then can be inserted into the DOM, but it's still single element.
You can use array to save all values, which needs to be inserted into TDs, then iterate and create new TD for each value.

Google javascript array tutorial
Post Reply