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.

[Don't use `for…in` to iterate!](https://stackoverflow.com/q/500504/1048572) And do declare the variable `i`. — Bergi, Jul 27 '19 at 17:12
i changed it, buts still logs only first, third and fifth card. however won't log those last three rows (2 and 2 functions) as before — Igor Mizak, Jul 27 '19 at 17:27
Hi. Firstly is this line logging all of the correct HTML retrieved? console.log(text); — Sarah, Jul 27 '19 at 17:30
Ok. do u need the second promise i.e the code: .then(newCards => {...})... ? can u try looping through newCards.children after the line newCards.innerHTML = text; and before the line: return newCards; and see what it prints? — Sarah, Jul 27 '19 at 17:36
@Sarah same as later. console.log(newCards); outputs div with second and fourth card. console.log(newCards.children); outputs HTMLCollection(5), but in array still only second and fourth. However loop outputs all five cards. — Igor Mizak, Jul 27 '19 at 17:41
@IgorMizak At least it should no longer output `item` and `namedItem`. — Bergi, Jul 27 '19 at 17:46
@IgorMizak Are you manipulating the `newCards` in other code? That would explain why [the console doesn't show them later when you inspect the element](https://stackoverflow.com/q/23392111/1048572). But if the loop iterates all children, then your code is working correctly. — Bergi, Jul 27 '19 at 17:47
@Bergi well I need to initialize carousel on each card if it contains more than one image, that's why I wanted to pass it to another promise. To make sure it is all parsed and appended to parent div before initialization. — Igor Mizak, Jul 27 '19 at 17:50
@IgorMizak So are you only confused by the `console.log()` output, or does something not work? Then please post the not working code. — Bergi, Jul 27 '19 at 17:53
@IgorMizak I see. Can you update your question with the php code where u output the HTML.? Maybe the HTML is not being parsed properly (this might happen if there are "new line" characters when you are sending the HTML) — Sarah, Jul 27 '19 at 17:58
@Sarah i succeeded to pass cards to another promise by creating an array in loop which returned all five cards. The code is php output passing array of user data to Smarty and smarty outputs HTML. There is for sure a lot of new line characters. Anyway passing of array helped to achieve what I wanted. So thank you. — Igor Mizak, Jul 27 '19 at 18:20
@IgorMizak Ah ok. Just for your information I've just tried out the code and fetched the html from a php file like you. Its working fine for me. Im getting a html collection of 5 and they're all printing in the array. — Sarah, Jul 27 '19 at 18:24

score 0 · Answer 1 · answered Jul 27 '19 at 17:50

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

javascript strange children behavior

1 Answers1