Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Check If Parent Element Contains Child Element in JavaScript
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.
7K+ Views
