Oh yes, there was no vanilla JavaScript in my last post. Here’s where we’ll find it.
That list of tasks translates to the following JavaScript, though I’ll do them in just a slightly different order to make it easier to present the information.
var footnotes = document.querySelectorAll(".footnote");
var footers = document.querySelector("#footers");
footnotes.forEach(function (footnote, index) {
var num = index + 1;
var sup = addSuperscript(footnote, num);
linkSupToFootnote(sup, footnote);
moveFootnoteToFooters(footnote, footers);
linkFootnoteToSup(footnote, sup);
});
Here’s what things look like before those functions have been implemented. https://jsfiddle.net/pmw57/brns38wk/
We just need to implement those functions.
Add superscript
This task is quite easy, where you just add a superscript element and place the number inside of it, then insert it before the footnote.
function addSuperscript(footnote, num) {
var sup = document.createElement("sup");
sup.appendChild(document.createTextNode(num));
footnote.parentNode.insertBefore(sup, footnote);
return sup;
}
In the example at https://jsfiddle.net/pmw57/brns38wk/1/ you’ll see that a superscript number now appears before each footnote.
Move footnote to footers
Now that we have a reference to the superscript number, we can move the footnote down to the footers section.
function moveFootnoteToFooters(footnote, footers) {
var li = document.createElement("li");
li.appendChild(footnote);
footers.appendChild(li);
}
The example at https://jsfiddle.net/pmw57/brns38wk/2/ shows how things look now that the footnotes are moved down to the footers section.
We now need to link each superscript number to its appropriate footnote.
Link to footnote
Linking a superscript to the footnote is where we use the superscripted number as a footnote identifier, and put the superscript number inside of a suitable link.
function linkSupToFootnote(sup, footnote) {
var a = document.createElement("a");
footnote.setAttribute("id", "footnote" + sup.innerText);
a.href = "#" + footnote.getAttribute("id");
sup.childNodes.forEach(function (childNode) {
a.appendChild(childNode);
});
sup.appendChild(a);
}
The example at https://jsfiddle.net/pmw57/brns38wk/3/ shows the linked superscript number now working.
But, it helps to have the same number on the footnote, linking back to the superscript. Which we’ll do now.
Link to superscript
It helps if each footnote has a matching number as the superscript for identification purposes, and if scrolling is needed to get back up to the superscript number, it’s convenient if you can click on the footnote number to scroll back up to the superscript.
We just need to add a linked number in front of the existing footnote to achieve that. For the sake of presentation, I’ve combined together both the number link and trailing space into a documentFragment object, and inserted that combined group before the footnote.
function linkFootnoteToSup(footnote, sup) {
var docFrag = document.createDocumentFragment();
a = document.createElement("a");
sup.setAttribute("id", "footref" + sup.innerText);
a.href = "#" + sup.getAttribute("id");
a.appendChild(document.createTextNode(sup.innerText));
docFrag.appendChild(a);
docFrag.appendChild(document.createTextNode(" "));
footnote.insertBefore(docFrag, footnote.firstChild);
}
The example at https://jsfiddle.net/pmw57/brns38wk/4/ shows how things look when the footnotes code is completed and working correctly.
Hover on superscript to view footnote
One last refinement is where you hover on the footnote to read it, which can be achieved using the title attribute.
That can be achieved by making a simple update to the addSuperscript function to set the title attribute.
function addSuperscript(footnote, num) {
var sup = document.createElement("sup");
sup.appendChild(document.createTextNode(num));
sup.setAttribute("title", footnote.innerText);
footnote.parentNode.insertBefore(sup, footnote);
return sup;
}
The example at https://jsfiddle.net/pmw57/brns38wk/5/ shows this update where hovering on the superscript number shows the footnote text.
Summary
All in all the full scripting code for this particular example is:
function addSuperscript(footnote, num) {
var sup = document.createElement("sup");
sup.appendChild(document.createTextNode(num));
sup.setAttribute("title", footnote.innerText);
footnote.parentNode.insertBefore(sup, footnote);
return sup;
}
function linkSupToFootnote(sup, footnote) {
var a = document.createElement("a");
footnote.setAttribute("id", "footnote" + sup.innerText);
a.href = "#" + footnote.getAttribute("id");
sup.childNodes.forEach(function (childNode) {
a.appendChild(childNode);
});
sup.appendChild(a);
}
function linkFootnoteToSup(footnote, sup) {
var docFrag = document.createDocumentFragment();
a = document.createElement("a");
sup.setAttribute("id", "footref" + sup.innerText);
a.href = "#" + sup.getAttribute("id");
a.appendChild(document.createTextNode(sup.innerText));
docFrag.appendChild(a);
docFrag.appendChild(document.createTextNode(" "));
footnote.insertBefore(docFrag, footnote.firstChild);
}
function moveFootnoteToFooters(footnote, footers) {
var li = document.createElement("li");
li.appendChild(footnote);
footers.appendChild(li);
}
var footnotes = document.querySelectorAll(".footnote");
var footers = document.querySelector("#footers");
footnotes.forEach(function (footnote, index) {
var num = index + 1;
var sup = addSuperscript(footnote, num);
linkSupToFootnote(sup, footnote);
moveFootnoteToFooters(footnote, footers);
linkFootnoteToSup(footnote, sup);
});
That is how you can use vanilla JavaScript to move and mange footnotes on the page.
