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 code should appear under Footnotes chapter automatically numbered and sorted ascending.
- Numbers representing number of footnote should appear super to each paragraph that has a footnote (replacing its actual text).
I have created the following HTML document.
Source code:
<div id="main_chapter_region">
<h1 id="main_chapter_heading">Main chapter</h2>
<p>Some paragraph text<span class="footnote"><sup>Some footnote text</sup></span></p>
<p>Some paragraph text<span class="footnote"><sup>Some footnote text</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>
Expected display mode:
Main chapter
Paragraph1
Paragraph2
Footnotes chapter
- Some footnote text (as inserted in HTML source code)
- Some footnote text (as inserted in HTML source code)
I understand I need JavaScript to do these steps:
1) Copywrite footnote text inside <span><sup>
to <ol>
that will hold it.
2) Replace recently copywrited footnote with a number respective to <li>
in <ol>
.
3) Repeat the process for all <span><sup>
in #main_chapter_region"
.
What can be a vanilla JavaScript approach to suffice this behavior?
I tried to search for some "cookbook recipe" to learn the logic of a generally similar or identical mechanism but found nothing; not even one session in StackOverflow or similar site. I ask anyone who have such an example to gracefully share as an answer.