javascript strange children behavior

Question

I am retrieving following html string via fetch:

<div class="card pink-bg alt-4 white-text border-0" data-user="4614" data-media="4614-15639902298038.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-4614">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="4614-15639902298038.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902298038.jpg">
            </div>
            <div class="carousel-item" data-media="4614-15639902295051.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902295051.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-4614" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-4614" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">nikka</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="2318" data-media="2318-15639888014617.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-2318">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="2318-15639888014617.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888014617.jpg">
            </div>
            <div class="carousel-item" data-media="2318-15639888026627.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888026627.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-2318" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-2318" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">baribie20160</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="7909" data-media="7909-15639920880841.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-7909">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="7909-15639920880841.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920880841.jpg">
            </div>
            <div class="carousel-item" data-media="7909-15639920886970.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920886970.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-7909" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-7909" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">xxxsasha</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="2960" data-media="2960-15639892811277.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-2960">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="2960-15639892811277.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892811277.jpg">
            </div>
            <div class="carousel-item" data-media="2960-15639892815552.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892815552.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-2960" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-2960" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">jova</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="8066" data-media="8066-15639922094801.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-8066">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="8066-15639922094801.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/8/8066/likethumbs/8066-15639922094801.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">mshoneymoon</h5>
    </div>
</div>

After retrieval i create a new <div> element and insert retrieved HTML string by setting innerHTML property for newly created <div> .

When i log whole newly created <div> into console it shows me that it contain only second and fourth card.

When i log children property of new <div> it shows me HTML collection with length of 5, but in array are again only second and fourth card.

When I try to loop through children and log each children to console, it logs first, third and fifth card, and at the end:

2
f item() { [native code] }
f namedItem() { [native code] }

The whole javascript code for this is:

fetch("index.php?action=load-profile-cards", {
    method: 'POST',
    body: data
})
.then(response => response.text())
.then(text => {
    console.log(text);
    let newCards = document.createElement("div");
    newCards.innerHTML = text;
    return newCards;
})
.then(newCards => {
    console.log(newCards);
    console.log(newCards.children);
    for(let i = 0; i < newCards.children.length; i++){
        console.log(newCards.children[i]);
    }
});

Does anyone knows explanation for this? Any help greatly appreciated.

Answer 1

I don't think I can reproduce the issue, console log seems fine in all cases (although you should self-close your img tags in the endpoint response, but didn't make a difference here):

 // mocking fetch here _fetch = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(` <div class="card pink-bg alt-4 white-text border-0" data-user="4614" data-media="4614-15639902298038.jpg"> <div class="carousel slide" data-ride="carousel" id="card-4614"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="4614-15639902298038.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902298038.jpg"> </div> <div class="carousel-item" data-media="4614-15639902295051.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902295051.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-4614" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-4614" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">nikka</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="2318" data-media="2318-15639888014617.jpg"> <div class="carousel slide" data-ride="carousel" id="card-2318"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="2318-15639888014617.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888014617.jpg"> </div> <div class="carousel-item" data-media="2318-15639888026627.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888026627.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-2318" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-2318" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">baribie20160</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="7909" data-media="7909-15639920880841.jpg"> <div class="carousel slide" data-ride="carousel" id="card-7909"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="7909-15639920880841.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920880841.jpg"> </div> <div class="carousel-item" data-media="7909-15639920886970.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920886970.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-7909" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-7909" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">xxxsasha</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="2960" data-media="2960-15639892811277.jpg"> <div class="carousel slide" data-ride="carousel" id="card-2960"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="2960-15639892811277.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892811277.jpg"> </div> <div class="carousel-item" data-media="2960-15639892815552.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892815552.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-2960" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-2960" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">jova</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="8066" data-media="8066-15639922094801.jpg"> <div class="carousel slide" data-ride="carousel" id="card-8066"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="8066-15639922094801.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/8/8066/likethumbs/8066-15639922094801.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">mshoneymoon</h5> </div> </div> `); }, 1000); }); }; _fetch() .then(text => { //console.log(text); let newCards = document.createElement("div"); newCards.innerHTML = text; console.log(newCards); console.log(newCards.children); for(let i = 0; i < newCards.children.length; i++){ console.log(newCards.children[i]); } document.querySelector('body').appendChild(newCards); });