JavaScript: create footnotes

by gabrieleromanato

HTML

<p>Augue rhoncus habitasse ut penatibus porta? A <span class="note">auctor</span> odio elementum. Elementum urna eros odio porta pid lundium egestas, penatibus dolor? Lacus ut, rhoncus dignissim rhoncus dignissim tincidunt porta et scelerisque, porta platea non arcu tincidunt turpis, lorem diam, urna massa turpis aliquam. Ut arcu, aliquam sed, in cum habitasse elit! Dolor! Augue adipiscing. Amet hac amet, enim, scelerisque sed, proin, tincidunt? <span class="note">Cras</span>, amet, phasellus turpis amet massa aliquam sagittis, eros, vut egestas, odio pulvinar nascetur ut, in porttitor nisi a, elementum vut <span class="note">lectus</span> nascetur! Porta! Ridiculus amet penatibus enim est? Pellentesque phasellus, porttitor et a integer, eu nisi non elementum enim hac, pellentesque urna, odio placerat urna porttitor tortor elit in elementum? Diam mauris placerat eu nisi. Quis purus vut.</p>

CSS

body {
    margin: 2em auto;
    width: 50%;
    line-height: 1.4;
}

span.note a {
    padding: 0 0.3em;
    vertical-align: top;
    font-size: small;
}

ol {
    margin-top: 20em;
}

JavaScript

var FootNote = function() {
    var targets = document.getElementsByTagName('span');

    var addLinks = function() {

        for (var i = 0; i < targets.length; i++) {

            var span = targets[i];
            var $class = span.className;
            if ($class.indexOf('note') != -1) {

                var note = document.createElement('a');
                note.href = '#note-' + (i + 1);
                note.appendChild(document.createTextNode('(' + (i + 1) + ')'));
                span.appendChild(note);

            }

        }

    };

    var createNotes = function() {

        var a = document.getElementsByTagName('a');
        var list = document.createElement('ol');

        for (var j = 0; j < a.length; j++) {
            var link = a[j];
            var href = link.getAttribute('href');
            if (href.indexOf('#note') != -1) {

                var parent = link.parentNode;
                var text = parent.childNodes[0].nodeValue;
                var li = document.createElement('li');
                li.setAttribute('id', href.replace('#', ''));
                li.appendChild(document.createTextNode(text));
                list.appendChild(li);

            }

        }
        document.body.appendChild(list);

    };

    addLinks();
    createNotes();

};


FootNote();