Как перебрать объект htmlcollection?

Я просмотрел почти каждый вопрос, который здесь задавали о htmlcollection.

Итак, у меня есть div, и я извлекаю данные и создаю div внутри этого div с помощью ajax, чтобы они не были жестко запрограммированы.

вот как выглядит div до получения данных

    <div id="tivvits"></div>

так выглядит div#tivvits после вызова функции show_all_tivvits(); show_all_tivvits() — это функция, в которой я создаю запрос ajax и создаю новые элементы div, такие как div#tivvit-21, div#tivvit-22 и т. д.

    <div id="tivvits">
        <div id="tivvit-19" class="grid-container">...</div>
        <div id="tivvit-20" class="grid-container">...</div>
    </div>

это часть файла js

    document.addEventListener("DOMContentLoaded", function(){
    
        show_all_tivvits();
        var t = document.getElementById('tivvits');
        const j = t.getElementsByClassName("grid-container");
        const k = Array.prototype.slice.call(j)
        console.log(k);
        for (var i = 0; i < k.length; i++) {
            console.log(k[i]);
        }

    });

то, что я хотел сделать в функции show_all_tivvits(), это то, что я хочу получить div, которые уже находятся в div#tivvits, и таким образом я не собираюсь создавать их снова, но проблема в том, что когда я использую console.log() для распечатки document.getElementById('tivvits').getElementsByClassName('grid-container') есть элементы в коллекции html, но когда я распечатываю длину, она возвращает 0.

еще одна вещь, когда я открываю inspect›source в chrome, мой index.php не имеет обновленных div#tivvits. Я пробовал почти каждый способ зациклить эту htmlколлекцию, но она не работает.

список вещей, которые я пробовал;

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;