HTML and CSS Reference
In-Depth Information
where id is again the id value of the corresponding heading element in the source docu-
ment. This will allow you to easily match list items in the table of contents with their cor-
responding headings, and vice versa. You'll need this ability for some of the tasks in the
next session. Figure 14-38 shows the revised node structure you'll apply to each list item.
Figure 14-38
node structure for list items as hypertext links
LI
id="TOC id "
<li id="TOC id " >
<a href="# id ">
heading text
</a>
</li>
A
href="# id "
" heading text "
HTML fragment
node tree
To create the new node structure, you'll replace the old commands that inserted the
text of the link items with new code that inserts the text for each item as a hyperlink.
First, you'll add an id attribute to the list item using the following command:
listItem.id = “TOC” + n.id;
Then you'll create a hypertext link containing the text of the heading node from the
source document along with an href attribute that points to that heading, as follows:
var linkItem = document.createElement(“a”);
linkItem.innerHTML = n.innerHTML;
linkItem.href = “#” + n.id;
Finally, you'll append the hypertext link to the list item, as follows:
listItem.appendChild(linkItem);
You'll add these commands to the createList() function now, and then you'll test the links
in the table of contents.
To turn the list items into hypertext links:
1. Go to the createList() function. Directly after the command to declare the listItem
variable, insert the following command to add an id attribute to the list item:
listItem.id = “TOC” + n.id;
2. Delete the following line from the code:
listItem.innerHTML = n.innerHTML;
 
Search WWH ::




Custom Search