Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why can't I get the DIV child element from LI?

Why does the code always return false?
Why can’t I get the DIV child element from LI?

let li = document.getElementById('ul').children
console.log(li)
for(i=0;i<li.length;i++)
  li.hasChildren ? console.log("true") : console.log("false")// only false
<div id="conteinerTask2">
    <ul id="ul">
        <li class= "el">Element 1
            <div class="el-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eum quibusdam obcaecati sunt nulla, culpa nesciunt quas in officia sit. Illo aliquam beatae amet eos placeat neque, earum officiis ratione reiciendis exercitationem.</div></li>
        <li class= "el">Element 2
            <div class="el-txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus ex commodi, laudantium corrupti nam quos.</div></li>
        <li class= "el">Element 3
            <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa obcaecati delectus nulla aperiam sint sit aliquam natus! Voluptatum, minima libero.</div></li>
        <li class= "el">Element 4
            <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing.</div>
        </li>
    </ul>
</div>
Tags:

2

Answers


  1. 0

    Firstly in your for loop you’re only accessing the collection of li elements, not each li individually because you don’t access them by index.

    Secondly, there is no hasChildren property. You can use children.length > 0 instead.

    Here’s a working example with the above corrections made:

    let li = document.getElementById('ul').children

for (i = 0; i < li.length; i++) {
  li[i].children.length > 0 ? console.log("true") : console.log("false") // only false
}
    <div id="conteinerTask2">
  <ul id="ul">
    <li class="el">Element 1
      <div class="el-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eum quibusdam obcaecati sunt nulla, culpa nesciunt quas in officia sit. Illo aliquam beatae amet eos placeat neque, earum officiis ratione reiciendis exercitationem.</div>
    </li>
    <li class="el">Element 2
      <div class="el-txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus ex commodi, laudantium corrupti nam quos.</div>
    </li>
    <li class="el">Element 3
      <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa obcaecati delectus nulla aperiam sint sit aliquam natus! Voluptatum, minima libero.</div>
    </li>
    <li class="el">Element 4
      <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing.</div>
    </li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    .children returns an live HtmlCollection. You need to index it in your for-loop. Also these is no hasChildren. Use hasChildNodes

     li[i].hasChildNodes() ? console.log("true") : console.log("false")

    For sake of completeness

    const myElement = document.getElementById("ul");
for (const child of myElement.children) {
  const result = child.hasChildNodes ? "true" : "false";
  console.log(result);
}
    <div id="conteinerTask2">
  <ul id="ul">
    <li class="el">Element 1
      <div class="el-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eum quibusdam obcaecati sunt nulla, culpa nesciunt quas in officia sit. Illo aliquam beatae amet eos placeat neque, earum officiis ratione reiciendis exercitationem.</div>
    </li>
    <li class="el">Element 2
      <div class="el-txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus ex commodi, laudantium corrupti nam quos.</div>
    </li>
    <li class="el">Element 3
      <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa obcaecati delectus nulla aperiam sint sit aliquam natus! Voluptatum, minima libero.</div>
    </li>
    <li class="el">Element 4
      <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing.</div>
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search