HTML and CSS Reference
In-Depth Information
Creating a Nested List
Norene reviewed the initial table of contents you created in the previous session. She
is pleased that the table of contents extracts the text from all of the heading elements in
the Constitution document. However, it doesn't distinguish between main headings and
subheadings. Recall that Norene wants you to make the table of contents a nested list in
which lower-level headings are nested within upper-level headings. Figure 14-22 shows
how the current HTML fragment generated by the createList() function needs to be modi-
fied to create a nested list of headings. All entries that match the h1 heading are placed
at the top level of the table of contents, the entries for h2 headings are placed at the next
lower level, and so forth.
Figure 14-22
creating a nested list
<ol>
<li>Preamble</li>
<li>Articles of the Constitution
<ol>
<li>The Legislative Branch
<ol>
<li>The Legislature</li>
<li>The House</li>
<li>The Senate</li>
</ol>
</li>
<li>The Executive Branch
<ol>
<li>The President</li>
<li>Presidential Powers</li>
</ol>
</li>
</ol>
</li>
<li>Amendments
<ol>
<li>I. Freedom of Expression</li>
<li>II. Right to Bear Arms</li>
</ol>
</li>
</ol>
Heading Levels
h1 heading
h2 heading
h3 heading
<ol>
<li>Preamble</li>
<li>Articles of the Constitution</li>
<li>The Legislative Branch</li>
<li>The Legislature</li>
<li>The House</li>
<li>The Senate</li>
...
<li>The Executive Branch</li>
<li>The President</li>
<li>Presidential Powers</li>
...
<li>Amendments</li>
<li>I. Freedom of Expression</li>
<li>II. Right to Bear Arms</li>
...
</ol>
nested list
current list
You need to modify the createList() function so that every time a new list item is added
to the TOC, it is placed at the appropriate level in the table of contents. There are three
possibilities:
1. The new list item is at the same level as the previous list item (such as when an h2
element follows another h2 element).
2. The new list item is at a lower level than the previous list item (such as when an h3
element follows an h2 element).
3. The new list item is at a higher level than the previous list item (such as when an h1
element follows an h3 element).
To determine the level of each list item, you can use the information returned by the
indexOf() function that you used in the previous session. The function returns a value
of 0 for all h1 headings it encounters, 1 for all h2 headings, 2 for all h3 headings, and so
 
Search WWH ::




Custom Search