HTML and CSS Reference
In-Depth Information
◗
3.
Replace the deleted line with the following code to create and append the hyper-
text link to each heading (see Figure 14-39):
/* Create a link to the heading node in the source document */
var linkItem = document.createElement(“a”);
linkItem.innerHTML = n.innerHTML;
linkItem.href = “#” + n.id;
/* Append the hypertext link to the TOC list item */
listItem.appendChild(linkItem);
Figure 14-39
creating list items as hypertext links
adds an id to every
list item in the TOC
creates a hypertext
link to the heading
element in the
source document
appends the
hypertext link to
the list item
◗
4.
Save your changes to the file, and then reload
usconst.htm
in your Web browser.
Verify that each entry in the table of contents appears as a hypertext link. See
Figure 14-40.
Figure 14-40
hypertext links in the table of contents
each list item is linked
to the corresponding
heading in the so
u
rce
document
◗
5.
Click a link in the table of contents and verify that the browser jumps to the cor-
responding heading in the source document.