Java Reference
In-Depth Information
exercise 1 Solution
It seems a rather daunting example, but rather than being difficult, it is just a conjunction of
two areas, one building a tree structure and the other navigating the tree structure. You start at
the
<body/>
element and create a
<table/>
element. Now you can navigate to the new
<table/>
element you've created and create a new
<tr/>
element and carry on from there. It's a lengthy,
repetitious, and tedious process, so that's why it's a good idea to comment your code to keep track
of where you are.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 9: Question 1</title>
</head>
<body>
<script>
var tableElem = document.createElement("table");
var trElem1 = document.createElement("tr");
var trElem2 = document.createElement("tr");
var trElem3 = document.createElement("tr");
var tdElem1 = document.createElement("td");
var tdElem2 = document.createElement("td");
var tdElem3 = document.createElement("td");
var tdElem4 = document.createElement("td");
var tdElem5 = document.createElement("td");
var tdElem6 = document.createElement("td");
var tdElem7 = document.createElement("td");
var tdElem8 = document.createElement("td");
var tdElem9 = document.createElement("td");
var textNodeA1 = document.createTextNode("Car");
var textNodeA2 = document.createTextNode("Top Speed");
var textNodeA3 = document.createTextNode("Price");
var textNodeB1 = document.createTextNode("Chevrolet");
var textNodeB2 = document.createTextNode("120mph");
var textNodeB3 = document.createTextNode("$10,000");
var textNodeC1 = document.createTextNode("Pontiac");
var textNodeC2 = document.createTextNode("140mph");
var textNodeC3 = document.createTextNode("$14,000");
var docNavigate = document.body; //Starts with body element
docNavigate.appendChild(tableElem); //Adds the table element
docNavigate = docNavigate.lastChild; //Moves to the table element
docNavigate.appendChild(trElem1); //Adds the TR element
docNavigate = docNavigate.firstChild; //Moves the TR element
docNavigate.appendChild(tdElem1); //Adds the first TD element in the
// heading
docNavigate.appendChild(tdElem2); //Adds the second TD element in the
// heading
docNavigate.appendChild(tdElem3); //Adds the third TD element in the
// heading
docNavigate = docNavigate.firstChild; //Moves to the first TD element
