I have looked at almost every question that has been asked here about htmlcollection.

So I have a div and I am fetching data and creating divs inside this div with ajax so they are not hardcoded.

this is how div look like before I fetch the data

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

```

this is how div#tivvits looks like after I call function show\_all\_tivvits();
show\_all\_tivvits() is a function where I create a ajax request and create new divs
such as div#tivvit-21, div#tivvit-22, etc.

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

```

this is part of the js file

```
    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]);
        }

    });

```

what I wanted to do in show\_all\_tivvits() function is I want to get the divs that are already in the div#tivvits and that way I am not gonna create them again but the problem is when I use `console.log()` to print out `document.getElementById('tivvits').getElementsByClassName('grid-container')` there are items in the htmlcollection but when I print out length it returns 0.

one more thing when I open inspect>source in chrome my index.php doesn't have updated div#tivvits.
I have tried almost every way to loop this htmlcollection but it is not working.

list of things I have tried;

```
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;

```