HTML - DOM Element contains() Method

Quiz

The HTML DOM Element contains() method is used to determine whether the specified element (node) is a descendant of a node (parent). The descendant can be a child, grandchild, etc.

This method returns a boolean value true if the element contains the specified element within it; otherwise, it returns false.

Syntax

Following is the syntax of the HTML DOM Element contains() method −

element.contains(childElement);

Parameters

This method accepts a single parameter as mentioned below −

Parameter	Description
childElement	The DOM element to check if it's contained within the parentElement.

Return Value

This method returns true if the specified element is a descendant of the parent element; and false otherwise.

Example 1: Checking for Child Elements

The following is a basic example of the HTML DOM Element contains() method. It checks whether an element has any child (descendant) elements −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element contains()</title>
</head>
<body>
<h3>HTML DOM Element contains() Method</h3>   
<div class="cont" id="pE">Parent Element
   <div class="ele" id="cE">Child Element</div>
</div>
<button onclick="checkContainment()">Check Child Element</button>
<p id="result"></p>
<script>
   function checkContainment() {
      const resultElement = document.getElementById('result');
      let pE = document.getElementById('pE');
      let cE = document.getElementById('cE');
      resultElement.innerHTML = 
	  "Does div have any child element? " + pE.contains(cE);
   }
</script>
</body>
</html>

Since the parent div element (pE) contains the child div element (cE), the above program will return true.

Example 2: Checking if an Element Contains Itself

Following is another example of the HTML DOM Element contains() method. We use this method to determine whether the div element contains itself or not −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element contains()</title> 
<style>
   .element {
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element contains() Method</h3>
<p>Self-Containment Check</p>
<div class="element" id="selfCon">Self-Contained Element</div>
<button onclick="checkSelfContainment()">Check Self-Containment</button>
<p id="selfConRes"></p>
<script>
   function checkSelfContainment() {
      const resultElement = document.getElementById('selfConRes');
      let selfCon = document.getElementById('selfCon');
      resultElement.innerHTML = 
      selfCon.contains(selfCon) ? 'The element contains itself.' :
	  'The element does not contain itself.';
   }
</script>
</body>
</html>

When the button is clicked, it displays "The element contains itself".

Example 3: Checking for No Child Elements

In the example below, we use the contains() method to check whether an element contains the specified element or not −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element contains()</title> 
<style>
   .element {
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element contains() Method</h3>
<p>Checking for no child element</p>
<div class="element" id="pE">
    This is the parent element.
</div>
<p id="notChild">This is not a child element.</p>
<button onclick="checkContainment()">Check for Child</button>
<p id="res"></p>
<script>
   function checkContainment() {
      const res = document.getElementById('res');
      const pE = document.getElementById('pE');
      const notChild = document.getElementById('notChild');
      const containsElement = pE.contains(notChild);
      res.innerHTML = 
	  "Does the parent element contain the specified element? " + 
	  containsElement;
   }
</script>
</body>
</html>

The above program returns "false" since the specified element is not a child element.

Supported Browsers

Method
contains()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page