Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 965

The last line of code uses the insertBefore() method to insert the emphasized text
before the second text node. Although at first glance this approach might seem more
cumbersome than simply using the innerHTML method, the advantage of using nodes is
that you can work with individual elements and text strings with more detail and flexibil-
ity than is possible with other methods.

Attaching and Removing Nodes
• To append a new node as a child of a preexisting node, use the method

node .appendChild( new )
where node is the preexisting node and new is the new child. The new child node is
appended to the end of the child nodes collection. If new already exists as a node in
the document fragment, it is moved from its current location to the new location.
• To insert a new node at a specific location in the child nodes collection, use

node .insertBefore( new , child )
where child is the child node in front of which the new node should be placed. If new
already exists as a node in the document fragment, it is moved from its current loca-
tion to the new location.
• To remove a child node, use the method

node .removeChild( old )
where old is the child node to be removed.
• To replace one child node with another, use the following method:

node .replaceChild( new , old )

You'll use the appendChild() method now to append the ordered list element that
you just created to the table of contents box.

To append an ordered list element to the table of contents:

◗

1. Within the makeTOC() function in the toc.js file, add the following code as shown
in Figure 14-14:

/* Append the list to the TOC */
TOC.appendChild(TOCList);

Figure 14-14 appending the ordered list element

◗

2. Save your changes to the file.