Why does my `querySelectorAll` result miss elements added later?

Probably not. The important detail is that querySelectorAll() returns a static, non-live NodeList: its membership reflects the matches when you ran the query, and it does not update when the document changes afterward. [S1]

For example, if the query finds three items and your code then adds a fourth, the collection you already saved still contains the original three. The new element can match the selector perfectly and still be absent from that earlier result.

Think of the result as a snapshot, not a continuously updated list. The right fix depends on what you want to do with the new element: collect all current matches again, or handle an action on matching elements as it happens.

Run the query again after the addition, then work with that fresh result. MDN identifies querying again as the way to include newly added matches in a later operation. [S1]

const list = document.querySelector("#items");

function highlightItems() {
  document.querySelectorAll("#items .item").forEach((item) => {
    item.classList.add("highlighted");
  });
}

function addItem() {
  const item = document.createElement("div");
  item.className = "item";
  item.textContent = "New item";
  list.append(item);

  highlightItems(); // Query after adding the new item.
}

Here, highlightItems() deliberately makes a new query each time it runs. Replace the selectors, element creation, and class name with your own. If you only need to process the new element, you could instead keep a reference to the element you created and work with that; re-querying is useful when the operation should cover every current match.

Not necessarily. If the buttons sit inside a parent that remains in the document, you can listen on that parent and check whether a click came from a matching button. Click events can bubble from a nested element to an ancestor; this is the basis of event delegation and can handle descendants that were not present when the parent listener was attached. [S2]

const list = document.querySelector("#items");

list.addEventListener("click", (event) => {
  if (!(event.target instanceof Element)) return;

  const button = event.target.closest("[data-action='remove']");
  if (!button || !list.contains(button)) return;

  button.closest(".item")?.remove();
});

For this example, assume each removable item contains a button marked data-action="remove". The listener is attached once to the list, so items added under that list later can use the same handler. The containment check keeps the handler scoped to that list. This approach depends on the relevant event bubbling; code that stops propagation before it reaches the parent can prevent the parent listener from handling it. [S2]

Choose based on the job, not just on whether the content changes:

1. Need a current collection for a batch operation? Query again after inserting or removing elements, then use that fresh result. A saved querySelectorAll() result will not refresh itself. [S1]
2. Need to respond to an event on changing descendants? Try one delegated listener on a stable ancestor, provided the event bubbles to it. [S2]
3. Need to handle only the element you just created? Keep its reference and operate on it directly rather than collecting every match again.

If a delegated click appears to be missed, check that the clicked control is inside the parent with the listener, that the selector identifies the intended control, and that the event can reach the parent. In particular, propagation being stopped can affect this approach. [S2] Neither strategy makes an old query result live: querying again creates a new result; delegation handles events through an ancestor.