Почему document.querySelectorAll() не обновляется после добавления новых элементов? [дубликат] ⇐ Javascript

[Anonymous]

Я создаю простое приложение JS, в котором динамически добавляю новые элементы в DOM.
Однако, когда я вызываю document.querySelectorAll() после их добавления, новые элементы, похоже, не включаются.
Пример:

Код: Выделить всё

let buttons = document.querySelectorAll('.btn');

document.getElementById('add').addEventListener('click', () => {
const newBtn = document.createElement('button');
newBtn.classList.add('btn');
document.body.appendChild(newBtn);
console.log(buttons.length); // doesn’t increase!
});

Я попробовал вызвать querySelectorAll один раз вверху, предполагая, что он автоматически включит новые элементы, добавленные позже.
Я также пробовал добавлять новые кнопки с помощью InternalHTML вместо createElement, но получил тот же результат.
Я ожидал, что кнопки NodeList автоматически включат вновь добавленные элементы .btn, так что button.length увеличится после каждого клика.
Почему querySelectorAll не отражает новые элементы автоматически и как правильно с этим справиться?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -are-added