HTML - DOM Element hasChildNodes() Method

Quiz

"The HTML DOM Element hasChildNodes() method is used to check whether an HTML element has any child nodes inside it. A child node is a node that is present inside any parent node and can be elements, text nodes, or comment nodes.

This method returns a boolean value true if the element has any child nodes present inside it, otherwise it returns false.

Syntax

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

element.hasChildNodes()

Parameters

This method does not accept any parameter.

Return Value

This method returns 'true' if the element has child nodes; and 'false' otherwise.

Example 1: Checking if an Element has Child Nodes

If the specified element has any child nodes present inside it, the HTML DOM Element hasChildNodes() method will return true −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element hasChildNodes()</title>
</head>
<body>
<h3>HTML DOM Element hasChildNodes() Method</h3>
<p>Checks if the element has child nodes.</p>
<div id="parentElement">
<p>Does this div have child nodes?</p>
</div>
<button onclick="checkChildNodes()">Check Child Nodes</button>
<script>
   function checkChildNodes() {
      const parentElement = document.getElementById('parentElement');
      let res = parentElement.hasChildNodes();
      if (res) {
         alert('The parent element has child nodes: ' + res);
      } else {
         alert('Parent element doesn`t have child nodes: ' + res);
      }
   }
</script>
</body>
</html>

The above program returns "true", because the "div" has the next child node inside it.

Example 2

If the specified element has no child nodes, the HTML DOM Element hasChildNodes() method will return false −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element hasChildNodes()</title>
</head>
<body>
<h3>HTML DOM Element hasChildNodes() Method</h3>
<p>Checks if the element has child nodes.</p>
<div id="parentElement"></div>
<button onclick="checkChildNodes()">Check Child Nodes</button>
<script>
   function checkChildNodes() {
      const parentElement = document.getElementById('parentElement');
      let res = parentElement.hasChildNodes();
      if (res) {
         alert('The parent element has child nodes: ' + res);
      } else {
         alert('Parent element doesn`t have child nodes: ' + res);
      }
   }
</script>
</body>
</html>

Once the above program is executed, it will display "false", because the div element has no child node inside in it.

Example 3: Dynamically adds and checks child Nodes

Here is another example of how the HTML DOM Element hasChildNodes() method works. First, we will dynamically add a child node and then check whether the current element has any child nodes inside it −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element hasChildNodes()</title>
</head>
<body>
<h3>HTML DOM Element hasChildNodes() Method</h3>
<p>Add child nodes by clicking the button!!</p>
<div id="parentElement"></div>
<button onclick="addTextNode()">Add Child Node</button>
<p>Checks for the child Nodes..</p>
<button onclick="checkChildNodes()">Check Child Nodes
</button>
<p><b>Note:</b> No child nodes will be displayed if none have been added.
</p>  
<script>
   function addTextNode() {
      const parentElement = document.getElementById('parentElement');
      const textNode = document.createTextNode('Text node added.');
      parentElement.appendChild(textNode);
   }
   function checkChildNodes() {
      const parentElement = document.getElementById('parentElement');
      if (parentElement.hasChildNodes()) {
         alert('Parent element has child nodes.');
      } else {
         alert('Parent has no child nodes.');
      }
   }
</script>
</body>
</html>

The above displays two buttons, the first button adds child node when clicked, and another checks whether the parent node has any child node and alert a message accordingly.

Supported Browsers

Method
hasChildNodes()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page