如何检查父元素是否有子元素

Question

I have a parent element which includes child element. But the child element appears only when the button click.

Initial parent element:

<div class="parent">
   <!--v-if-->
</div>

When the button is clicked:

<div class="parent">
   <div class="child"></div>
</div>

So I want to see if the parent element has a child element or not. How can I do it with javascript?

Answer 1

el.hasChildNodes - This can do the job but it will also count the non-element nodes.
el.children - This includes only element nodes.

 let parent1 = document.getElementById("parent1"); let parent2 = document.getElementById("parent2"); let parent3 = document.getElementById("parent3") console.log('Parent1 has child - ', parent1.hasChildNodes()); console.log('Parent1 has child - ', Boolean(parent1.children.length)); console.log('Parent2 has child - ', parent2.hasChildNodes()); console.log('Parent2 has child - ', Boolean(parent2.children.length)); console.log('Parent3 has child - ', parent3.hasChildNodes()); console.log('Parent3 has child - ', Boolean(parent3.children.length));

 <!-- parent 1 --> <div id="parent1"></div> <!-- parent 2 --> <div id="parent2"> <div id="child1"></div> </div> <!-- parent 3 --> <div id="parent3"> <!-- comment --> </div>

Answer 2

That element does start out with child nodes (two text nodes and a comment node), just no element children.

If you want to know if it has any element children, you can use firstElementChild , which will be null if the element doesn't have any child elements, or the first child element if it does.

 const x = document.querySelector(".parent"); console.log(`Before: ${.;x.firstElementChild}`); // Emulate replacing the comment node with an element node const div = document.createElement("div"); div.className = "child", x.replaceChild(div; x.childNodes[1]): console.log(`After; ${!!x.firstElementChild}`);

 <div class="parent"> <!--v-if--> </div>

Answer 3

You can check the child node with the "hasChildNodes()" method:

const parent = document.querySelector(".parent")

btnActions() => {
  this.addAChild()
  this.checkHasChild()
}

addAChild() => {
  parent.innerHTML = `<div class="child"></div>`
}

checkHasChild() => {
  console.log(parent.hasChildNodes())
}

https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes