Automatically Created (and Ascendingly Sorted) Footnotes List In A Dedicated Chapter With Vanilla Javascript

I desire to use an automatically created (and ascendingly sorted) footnotes list in a dedicated chapter with vanilla JavaScript: In client mode, footnote text from HTML source cod

Solution 1:

You could use createElement and appendChild methods for the first step. Iteration (step 3) can be done with querySelectorAll and a chained forEach. This will also give you the sequence number which you can use for knowing the footnote number (step 2).

const list = document.querySelector("#footnotes_list");
document.querySelectorAll(".footnote>sup").forEach((footnote, i) => {
    const li = document.createElement("li");
    li.append(...footnote.childNodes); // move content
    list.appendChild(li);
    footnote.textContent = i+1;
});

<divid="main_chapter_region"><h1id="main_chapter_heading">Main chapter</h2><p>Some paragraph text<spanclass="footnote"><sup>Some <b>bold</b> footnote text</sup></span></p><p>Some paragraph text<spanclass="footnote"><sup>Other <i>footnote text</i></sup></span></p></div><divid="footnotes_chapter_region"><h2id="footnotes_chapter_heading">Footnotes chapter</h2><olid="footnotes_list"><!-- Automatically created and sorted list items come here; --></ol></div>