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>
2
Answers
Firstly in your
for
loop you’re only accessing the collection ofli
elements, not eachli
individually because you don’t access them by index.Secondly, there is no
hasChildren
property. You can usechildren.length > 0
instead.Here’s a working example with the above corrections made:
.children
returns an liveHtmlCollection
. You need to index it in your for-loop. Also these is no. UsehasChildren
hasChildNodes
For sake of completeness