Quelle: www.brandspankingnew.net

/*
================================================
styling for footnotes begins here
================================================
*/

/* footnotes as they original appear inline, before reformatting */
span.footnote {
    color: #f30;
}

/* footnote links in text */
a.ftnlink {
    vertical-align: super;
    font-size: 0.8em;
}

/* div to hold all reformatted footnotes */
.footnoteholder {
    border-left: 1px solid #ccc;
    margin: 20px 0 50px 0;
    padding: 20px 10px;
    font-size: 0.8em;
    line-height: 1.2em;
}

/* div to hold single reformatted footnote */
.footnoteholder div.footnote {
    margin: 0 0 10px 0;
}

//    ======================================================================
//    formatFootnotes
//    project:    css / javascript footnotes
//    author:        Timothy Groves    desk [at] brandspankingnew.net
//    version:    1.0
//    language:    javascript
//    requires:    nothing
//    tested on:    Safari 2.0 Mac / FF 1.5 Mac / Opera 9 Mac
//    history:    26.01.2006    -    created
//    ======================================================================

var articles = 0;

function formatFootnotes(contID,noteID)
{
    // check for DOM capabilities
    if (!document.getElementById)
        return false;

    var cont = document.getElementById(contID);
    var noteholder = document.getElementById(noteID);
    var spans = cont.getElementsByTagName("span");
    
    var notes = 0;
    articles++;
    
    for (i=0;i<spans.length;i++)
    {
        if (spans[i].className == "footnote")
        {
            notes++;
            
            // get content of span
            var noteNode = spans[i].cloneNode( true );
            
            // remove css styling
            noteNode.className = "";
        
            // create a new div to hold the footnote
            var newEle = document.createElement( "div" );
            
            newEle.appendChild( document.createTextNode( notes + ". " ) );
            newEle.appendChild( noteNode );
            
            // add backlink
            blink = document.createElement("a");
            blink.href = "#ftnlink"+articles+"_"+notes;
            blink.appendChild( document.createTextNode( " [back]" ) );
            newEle.appendChild( blink );
            
            noteholder.appendChild( newEle );
            
            // add id & style
            noteholder.lastChild.id = "ftn"+articles+"_"+notes;
            noteholder.lastChild.className = "footnote";
            
            
            // insert link into span
            var newEle = document.createElement( "a" );
            newEle.href = "#"+noteID;
            newEle.title = "show footnote";
            newEle.id = "ftnlink"+articles+"_"+notes;
            newEle.className = "ftnlink";
            
            newEle.appendChild( document.createTextNode( notes ) );
            
            // empty span
            while (spans[i].childNodes.length)
                spans[i].removeChild( spans[i].firstChild );
            
            spans[i].appendChild( newEle );
        }
    }
}

<div id="article1">
    <h2>
        Article 1
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="footnote">This is a <a href="#">footnote</a>.</span> Integer accumsan placerat magna. Duis tincidunt adipiscing mi.
        Mauris tincidunt, ante nec mollis consequat, nibh lectus consectetuer massa, vitae vestibulum nisl nunc dapibus sem. Suspendisse ligula dui, ornare et, vulputate eu, laoreet non, ligula.
        Suspendisse malesuada tincidunt tortor. Curabitur sagittis tristique diam. Cras sem wisi, tincidunt et, condimentum id, aliquam sed, velit. Phasellus sapien velit, tempor in, rhoncus sed,
        ultricies eget, urna. Cras orci neque, facilisis sit amet, iaculis ut, tristique vulputate, lorem. Vivamus pretium diam sed neque.
    </p>
    <p>
        Phasellus tortor odio, convallis sit amet, consequat id, eleifend vitae, lorem. Proin vitae nibh. Nulla velit felis, condimentum sit amet, luctus eu, auctor ut, quam. <span class=
        "footnote">Sed molestie. In nibh risus, aliquet in, sodales id, imperdiet sit amet, risus.</span> Sed eros ante, malesuada non, varius ornare, porttitor lobortis, ligula. Vivamus semper arcu
        a nibh. Mauris congue, eros quis ullamcorper dapibus, pede justo rhoncus urna, sit amet sollicitudin sapien velit quis ante. Donec rutrum blandit ligula. Aliquam id nibh. Mauris metus nulla,
        dapibus ut, iaculis vitae, tincidunt in, metus. Phasellus vestibulum.
    </p>
    <p>
        Quisque elementum massa vitae ante. Aenean in diam. Nam non metus. Proin dapibus enim in diam. Phasellus et eros non dui interdum aliquam. Integer eleifend venenatis tortor. Suspendisse
        potenti. In a arcu. Praesent hendrerit enim ut tellus molestie dictum. Morbi mattis, ipsum ac tempus imperdiet, purus neque hendrerit augue, nec suscipit sem tortor sed tortor. Maecenas et
        nunc non ante sollicitudin commodo. Ut felis. Nam euismod tortor sed lorem. Pellentesque pharetra. Praesent vel risus. Aliquam erat volutpat. Vivamus porttitor metus in augue. Nullam id mi
        vel ligula imperdiet tristique. Suspendisse ante elit, volutpat eu, fringilla et, dictum vitae, nunc.
    </p>
    <p>
        Aenean lacus metus, pulvinar sed, consectetuer eget, tempor ut, enim. <span class="footnote">Praesent porta, odio ac commodo pulvinar, wisi risus interdum tellus, vel facilisis nunc sem et
        elit. Curabitur placerat interdum felis.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eleifend magna vitae ligula gravida tristique. Vivamus bibendum odio ac
        enim. Donec sagittis auctor libero. Sed metus arcu, accumsan eget, dapibus et, lobortis quis, dolor. Etiam nec lectus sed ipsum facilisis mattis. Morbi non ligula quis pede fringilla egestas.
        Donec vitae enim ac lorem consectetuer pulvinar. Praesent vitae orci id metus adipiscing fringilla. Mauris gravida lorem quis diam. Nunc non massa aliquam pede iaculis condimentum. Vivamus
        tincidunt. Quisque ornare orci ac massa. Ut malesuada condimentum lectus. Proin vitae sapien ac eros vulputate ultrices.
    </p>
    <p>
        Fusce aliquet ante sed pede. Vivamus vitae nibh. Nulla est lacus, consequat ut, interdum ut, ullamcorper at, enim. Duis placerat sem sed mauris. Donec in odio. Nulla a erat ut diam eleifend
        tempor. Aenean vel magna nec metus vestibulum vestibulum. Nam ac orci varius lorem ultrices aliquam. Praesent gravida, quam at hendrerit rutrum, quam pede iaculis sem, eget sodales risus
        risus iaculis risus. Morbi mattis mauris.
    </p>
</div>

<div id="artnotes1" class="footnoteholder">
</div>

<script type="text/javascript">
//<![CDATA[
        formatFootnotes('article1','artnotes1');
        formatFootnotes('article2','artnotes2');
//]]>
</script>