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

Figure 14-27 appending a nested list

<ol>
<li>item 1</li>
<li>item 2
<ol>
<li>item 3</li>
</ol>
</li>
</ol>

HTML fragment

OL

LI LI

OL

" item 1 "

" item 2 "

LI

" item 3 "

corresponding node tree

To do this in JavaScript, you'll create a new ordered list and then append the list item
to it using the following commands:

var nestedList = document.createElement(“ol”);
nestedList.appendChild(listItem);

The nested list is then appended as a child of the previous—and currently last—entry in
the current list, which can be done using the following command:

TOCList.lastChild.appendChild(nestedList);

Finally, you'll need to set the nested list as the new table of contents so that the text of
subsequent headings is added to it. You'll run the following command to change the
reference of the TOCList variable:

TOCList = nestedList;

You'll add these commands to the second if condition in the createList() function now.