Frontend alternative to the backend MediaWiki footnotes system → understanding an ES-2018 code

I program almost only with Bash and my JavaScript understanding is mostly vanilla basic; I don’t follow new changes of each EcmaScript release and I’m stuck misunderstanding the following ES-2018 code developed by user trincot of StackExchange.

The following code is a frontend alternative to the PHP MediaWiki backend footnote system.
I want to fully understand the JavaScript so I could then try to improve the code with vanilla JS to make each footnote superior number clickable and thus leading to the footnote in the end of page (just as available in generally any Wikipedia article).

The code

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>

My plea

Please explain to other learners and myself what is being done in each line;
I personally was unable to understand what is done at li.append(...footnote.childNodes); // move content; the “move content” comment isn’t clear to me at all.
I further misunderstood what footnote.textContent = i+1; means.

There is a handy es6-features site that not only looks good, but is a handy reference of different modern techniques.

Spread operator

The three dots is the spread operator. MDN has a good example of the spread operator with the following example:

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 
//  ["head", "shoulders", "knees", "and", "toes"]

textContent

The textContent property is similar to innerHTML. Using textContent is considered as more polite, and has better performance as it doesn’t parse things as HTML code.

Paul, thank you for the helpful comment; this is first clear explanation about a spread operator for me;
I now understand its code segment meant something like:

Append the children of any footnote for each <li>, and in the right place.

That said;

About textContent, what I meant to ask was what is i+1 in that context(?); I didn’t understand what 1 is being added, where and why.

That’s because the loop iterator starts at 0, but we want the footnote numbers in the text on the page to start from 1.

Thanks !

I wonder, why, than, if I remove footnote.textContent = i + 1; altogether, I still get a list starting from 1 (perhaps <ol> is built to start from 1 in general).

You’re looking in the wrong place. Look at the text above the footnotes, and you’ll see that the text no-longer has numbers telling you which footnote relates to the text.

Oh; I understand now; I should have examined the footnote numbers (superior text) areas also;
Indeed, without it, they have appeared to me totally empty - I just got at least one empty square-brackets box which I couldn’t even mark with the cursor in Google Chrome 80.0.3987.163 official build, 64-bit with Windows 10 Home, although the footnote list in the end of the article was fine.

Finally I understand what is being done in that code, thanks to you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.