Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to return true if the parent element contains the 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.
Syntax
parentNode.contains(childNode)
Parameters
- childNode - The node to test whether it's contained within the parent node
Return Value
Returns true if the child node is contained within the parent node, false otherwise.
Example: Using contains() method
<!DOCTYPE html>
<html>
<head>
<title>Node.contains() Example</title>
</head>
<body>
<div id="parent">
<p id="child">This is a child element</p>
</div>
<div id="result"></div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var isContained = parent.contains(child);
document.getElementById("result").innerHTML = "Does parent contain child: " + isContained;
</script>
</body>
</html>
Does parent contain child: true
Example: Testing with Non-Child Element
<!DOCTYPE html>
<html>
<head>
<title>Testing Non-Child Element</title>
</head>
<body>
<div id="parent">
<p id="child">Child element</p>
</div>
<div id="sibling">Sibling element</div>
<div id="result"></div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
var sibling = document.getElementById("sibling");
document.getElementById("result").innerHTML =
"Parent contains child: " + parent.contains(child) + "<br>" +
"Parent contains sibling: " + parent.contains(sibling);
</script>
</body>
</html>
Parent contains child: true Parent contains sibling: false
Using the hasChildNodes() method
Another way to check if the parent element contains any child element is to use the hasChildNodes() method. Note that this method only checks if the element has any child nodes, not a specific child.
The hasChildNodes() method returns true if the element contains any child nodes, including text nodes and whitespace.
Example: Using hasChildNodes() method
<!DOCTYPE html>
<html>
<head>
<title>hasChildNodes() Example</title>
</head>
<body>
<div id="parentWithChild">
<p>This div has children</p>
</div>
<div id="emptyParent"></div>
<div id="result"></div>
<script>
var parentWithChild = document.getElementById("parentWithChild");
var emptyParent = document.getElementById("emptyParent");
document.getElementById("result").innerHTML =
"Parent with child has children: " + parentWithChild.hasChildNodes() + "<br>" +
"Empty parent has children: " + emptyParent.hasChildNodes();
</script>
</body>
</html>
Parent with child has children: true Empty parent has children: false
Comparison
| Method | Purpose | Use Case |
|---|---|---|
contains() |
Check if specific element is a descendant | When you need to verify a particular child element |
hasChildNodes() |
Check if element has any child nodes | When you need to know if element has any children |
Key Points
-
contains()works for any descendant, not just direct children -
hasChildNodes()includes text nodes and whitespace as children -
contains()is more specific and commonly used for element relationships - Both methods are well-supported across modern browsers
Conclusion
Use Node.contains() to check if a specific element is contained within another element. Use hasChildNodes() when you only need to know if an element has any child nodes at all.
7K+ Views
