Easy links to/from glossary terms with JavaScript
Quick unobtrusive JavaScript that provides links to and from terms defined in a glossary in your page. Assumes you mark up terms to define with dfn, and put the glossary in a definition list. Currently needs terms in the definition list to appear in the same order as they do in the main text.
Also somewhat old and probably not nearly as efficient as it could be, so ideas for improvement would be welcome.
Also somewhat old and probably not nearly as efficient as it could be, so ideas for improvement would be welcome.
function createLinkedFootnotes() { defs = document.getElementsByTagName('dfn'); for(i = 0; i < defs.length; i++) { num = i + 1; footnote = document.createElement('sup'); linkToDef = document.createElement('a'); anchor = '#def' + num; termID = 'term' + num; linkToDef.setAttribute('href', anchor); linkToDef.setAttribute('id', termID); linkToDef.appendChild(document.createTextNode(num)); footnote.appendChild(linkToDef); defs[i].appendChild(footnote); } terms = document.getElementsByTagName('dt'); for(i = 0; i < terms.length; i++) { num = i + 1; footnote = document.createElement('sup'); linkBack = document.createElement('a'); anchor = '#term' + num; defID = 'def' + num; linkBack.setAttribute('href', anchor); linkBack.setAttribute('id', defID); linkBack.appendChild(document.createTextNode(num)); footnote.appendChild(linkBack); terms[i].insertBefore(footnote, terms[i].firstChild); } }