Java Reference
In-Depth Information
<td>140mph</td>
<td>$20,000</td>
</tr>
</tbody>
</table>
Exercise 2 Solution
It seems a rather daunting example, but rather than being diffi cult, it is just a conjunction of two areas,
one building a tree structure and the other navigating the tree structure. You start by navigating to the
<body/>
element and creating a
<table/>
element. Now you can navigate to the new
<table/>
element
you've created and create a new
<thead/>
element and carry on from there. It's a lengthy and repetitious
process, so that's why it's a good idea to comment your code to keep track of where you are.
<!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>
<title>Chapter 12: Question 1 Answer</title>
</head>
<body>
<script type=”text/javascript”>
var tableElem = document.createElement(“table”)
var thElem = document.createElement(“thead”)
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 tbodyElem = document.createElement(“tbody”)
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”)
docNavigate = document.documentElement; //Starts with HTML document
docNavigate = docNavigate.firstChild.nextSibling; //Moves to the head
// then body element
docNavigate.appendChild(tableElem); //Adds the table element
docNavigate = docNavigate.lastChild; //Moves to the table element
