do you know the difference between "live node list" vs "static node list" ?

well, when you fetching a list of elements from the Dom you have two methods:

• querySelectorAll()

• getElementsByTagName()

both methods will return (Simi-array of node elements), but not same array;

to take closer look lets add new element to this list and see what happens:

when you use querySelector method will return (NodeList object) a NO-LIVE-LIST it's got a snapshot from DOM (HTML ELEMENTS) and not update that array so when array changes when you updated from javaScript file using append() or appendChild().

with the other methodgetElementsByTagName() will return a(HTML collection ) a LIVE-LIST got an updated with elements you added.

one more tip:

still we using the querySelector methods for flexibility we have when we select elements, and maybe can be better for performance when you select elements only on html and remember you still have that live references to the DOM so you can easy change the value of this reference(pointer) easy by textContent() method.