Footnote Links

General Information

This script builds a list of URIs (hrefs or citations) from any tags within a specified container and appends the list (as footnotes) to the document in a specified location. Any referenced elements are given a dynamically-assigned number (in the form of a superscript) which corresponds to the link in the footnote list. The script checks for duplicate links and associates them with the same number. This script was created as a usability enhancement for printed webpages.
Current Version
1.3 (21 June 2005)
This script uses functions contained in our utilities library.


In your onload function, call footnoteLinks(), setting containerID and targetID to the ids your desired containers.

In your screen CSS (and anywhere else you want to hide the list and superscripts), create a rule for .printOnly:

.printOnly {
  display: none;

You can class links as ignore to have them not be picked up by the script:

<a href="" class="ignore">link</a>

You can also use the content generation from CSS2 as a fall-back for the script. When the script runs, it will class the <html> as “noted”. You simply supply the following rules to add the content generation and then remove it when the script runs:

a:visited:after {
  content: " (" attr(href) ") ";
  font-size: 90%;
html.noted a:link:after,
html.noted a:visited:after {
  content: "";

Change Log

1.0 (8 May 2005)
Initial script
1.1 (12 May 2005)
Added search for ignore class to avoid listing certain links
1.2 (5 June 2005)
Added support for jsUtilities 2.0 & fall-back CSS2 support.
1.3 (21 June 2005)
Added support for jsUtilities 2.1 & fixed IE incompatibilities.

Optimized Releases

These releases have been optimized for production by removing unnecessary white space, carriage returns, etc.

Development Version

If you are interested in helping to further develop this script, you can download the uncompressed JavaScript source file.