Каким образом Intersection Observer может отслеживать динамически подгружаемые элементы?

Question

[Дмитрий Жуков]

Приветствую.
Есть скрипт, который подгружает статьи с сервера (scroll + fetch).
Появилась задача менять title страницы и его адрес динамически, беря инфу из data атрибутов подгружаемых статей.
Т.е. доскролили вниз, статья подгрузилась, данные страницы изменились.
Проскролили вверх, до уже загруженной статьи, данные обновились (т.е. предыдущий title вернулся).
Решил обновлять title + url с помощью IntersectionObserver:

const changeInfo = (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
                let title = entry.target.dataset.title;
                let url = entry.target.dataset.url;
                document.title = title;
                window.history.pushState(url, ' ', url);
            }
        });
    }
    const options = {
        threshold: 0.55
    }
    const observer = new IntersectionObserver(changeInfo, options);

    document.querySelectorAll('.селекторСтатьи').forEach((section) => {
        observer.observe(section);
    });

Скрипт нормально работает на странице, где dom не меняется, т.е. все элементы присутствуют изначально.
Но как быть, если статьи подгружаемы? Обсервер их не видит.
Перенос

document.querySelectorAll('.селекторСтатьи').forEach((section) => {
        observer.observe(section);
    });

в последний .then (где у фетча происходит вывод подгруженной статьи)
не помогает.

фетч...
        .then(function (html) {
            articleShow.insertAdjacentHTML('beforeEnd', html);

            document.querySelectorAll('.main_section_top').forEach((section) => {
                observer.observe(section);
            });            
    
        });

- не работает

Comments

[Юрий Матрос]

const observer = new IntersectionObserver(changeInfo, options);
// Функция для добавления наблюдателей
function observeElements(elements) {
  elements.forEach((element) => {
    observer.observe(element);
  });
}
// Добавляем наблюдателей для элементов, которые уже на странице
observeElements(document.querySelectorAll('.селекторСтатьи'));

// При добавлении новых элементов, добавляем для них наблюдателей
fetch(...)
  .then(function (html) {
    articleShow.insertAdjacentHTML('beforeEnd', html);
    observeElements(document.querySelectorAll('.селекторСтатьи'));
  });