How to return true if the parent element contains the child element in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we are going to look at how we can return true if the parent element contains the child element in JavaScript. Assuming you have two HTML elements, a parent element, and a child element, and you want to know if the parent element contains the child element.

Using the Node.contains() method

The Node interface's contains() method returns a Boolean value, indicating whether a node is a descendant of a given node or not.

If you want to know if the parent element contains the child element, you can use the Node.contains() method.

Here's a simple example −

<div id="parent">
   <p id="child">Some text</p>
</div>

The below JavaScript code snippet checks if parent element contains child element.

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.contains(child) 
// returns true

In the above code, we use the getElementById() method to get a reference to the parent and child elements.

Then we use the parent.contains(child) to see if the parent element contains the child element.

Example

Below is the full code with HTML −

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="parent">
      <p id="child"></p>
   </div>
   <div id="result"></div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML ="Does parent contain child: "+ parent.contains(child)
   </script>
</body>
</html>

Using the hasChildNodes() method

Another way to check if the parent element contains any child element is to use the hasChildNodes() method.

The hasChildNodes() method returns true if it contains any child element.

Here's a simple example −

<div id="parent">
   <p id="child">Some text</p>
</div>

Look at the JavaScript code below −

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.hasChildNoodes();

In the above code, we use the getElementById() method to get a reference to the parent and child elements.

Then we use the hasChildNodes method to check if parent element has child element or not.

Example

Below is the full code with HTML −

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="parent">
      <p id="child"></p>
   </div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML = parent.hasChildNodes();
   </script>
</body>
</html>

To sum up, there are several ways to check if the parent element contains the child element. You can use the Node.contains() or the hasChildNodes() methods.

Imran Alam

Updated on: 01-Jul-2022

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started