AJAX and PHP

Even More DOM
In the previous exercise, you have created the list of elements by joining strings to compose a
simple HTML structure. The same HTML structure can be built programmatically using the
DOM. In the next exercise, you will generate this content programmatically:
Hello Dude! Here's a cool list of colors for you:
Black
Orange
Pink
Chapter 2
A DOM document is a hierarchical structure of elements, where each element can have one or
more attributes. In this HTML fragment, the single element with an attribute is , which has
an attribute called id with the value myDivElement. The root node that you can access through the
document object is . When implementing the above HTML document, you will end up with
a structure such as the one in the figure below:
Figure 2.3: A Hierarchy of HTML Elements
In Figure 2.3, you see an HTML structure formed of , , , , and
elements, and four text nodes ("Hello…", "Black", "Orange", "Pink"). In the next exercise, you will
create this structure using the DOM functions createElement, createTextNode, and appendChild.
Time for Action—Even More DOM
1. In the foundations folder, create a subfolder called evenmorejsdom.
2. In the evenmorejsdom folder, create a file called evenmorejsdom.html, and add the
following code to it:
AJAX Foundations: Even More JavaScript and DOM
37
www.it-ebooks.info