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;
});

<div id="main_chapter_region">
    <h1 id="main_chapter_heading">Main chapter</h2>
    <p>Some paragraph text<span class="footnote"><sup>Some <b>bold</b> footnote text</sup></span></p>
    <p>Some paragraph text<span class="footnote"><sup>Other <i>footnote text</i></sup></span></p>
</div>

<div id="footnotes_chapter_region">
    <h2 id="footnotes_chapter_heading">Footnotes chapter</h2>
    <ol id="footnotes_list">
        <!-- Automatically created and sorted list items come here; -->
    </ol>
</div>