How to check if a child element is present in a parent element in Javascript?

Published July 3, 2020

Conside this HTML,

<div class="articles">
  <h1 class="header">A Big Header</h1>
  <p class="para">Hey, Its A small paragraph</p>
</div>

How can we check if the p tag is a child of the div tag? 🤔 Well, there's a way for that in JavaScript. 🧙‍♀️

We can check using the contains() method available in the parent element.

First, Let's get a reference to our parent element div tag and our child tag p tag using their class names.

// get a reference to parent element div tag
const articlesDiv = document.querySelector(".articles");

// next get a refernce to child element p tag
const para = document.querySelector(".para");

We got all the references.

Now we need to invoke the method contains() available in our parent element and pass the child element reference.

// get a reference to parent element div tag
const articlesDiv = document.querySelector(".articles");

// next get a refernce to child element p tag
const para = document.querySelector(".para");

// check if child present in parent element
const isChildPresent = articlesDiv.contains(para);

console.log(isChildPresent); // true

The method returns boolean true if present and false if not.

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter