working with the DOM
Posted: Fri Nov 06, 2009 8:54 pm
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:
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:
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.
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
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>
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>
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"));
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