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.