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

To add the commands for the third condition:

◗

1. Return to the toc.js file in your text editor.

◗

2. Within the else condition, insert the following code, as shown in Figure 14-31:

When adding new nodes
to your document, it's
easy to make mistakes in
the structure. Always map
out the location of all child
and parent nodes using
a node tree diagram and
sample HTML code.

/* Calculate the difference between the previous level
and the higher-order level */
var levelUp = prevLevel - nodeLevel;

/* Change the current list to the higher-order list */
for (var i = 1; i <= levelUp; i++) {
TOCList = TOCList.parentNode.parentNode;
}

TOCList.appendChild(listItem);

Figure 14-31 appending the new list item to a higher-level list

moves u p two levels
in the node tree

◗

3. Save your changes to the file, and then reload usconst.htm in your Web browser.
The table of contents shows all three levels of headings with the h1 headings rep-
resented at the highest level of the list, followed by the h2 headings, and then the
h3 headings. See Figure 14-32.

Figure 14-32 the tOc displayed as a collection of nested lists

table of contents
appears as a
nested list