JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<div id='target'>
    <p>A favorite place of mine to visit in St. Louis is the <a href="'http://www.mobot.org">Missouri Botanical Gardens</a>.Great flowers all year round, and one of the finest annual orchid shows. My most visited places, though, are the <a href="'http://www.stlzoo.org">St. Louis Zoo</a>, hte <a href="http://www.nps.gov"><em>Gatewat Arch</em></a>, the new <a href="http://www.citygardernstl.gov">City Garden</a>, and the <a href="http://www.citygardenstl.org">City Garden</a>, and the <a href="http://mdc.mo.gov">Powder Vallley Comservation Nature Center</a> </p>
</div>

CSS

ul li {
    list-style-type: none;
    padding-bottom: 5px;
   }

JavaScript

window.onload = function() {
    var links = document.querySelectorAll('a');
    var footnote = document.createElement('ul');
  for(var i = 0; i < links.length; ++i) {
    var parent = links[i].parentNode;

    var num = document.createTextNode(i + 1);
    var sup = document.createElement('sup');
    sup.appendChild(num);
  
    var children = links[i].childNodes;
    for(var j = 0; j < children.length; ++j) {
        var newChild = children[j].cloneNode(true);
        parent.insertBefore(newChild,links[i]);
    }

    var sup2 = sup.cloneNode(true);
    parent.insertBefore(sup2,links[i]);

    var li = document.createElement('li');
    li.appendChild(sup);
    li.appendChild(links[i]);

    footnote.appendChild(li);
  }  
  document.body.appendChild(footnote);
}