How to check if an element has any children in JavaScript ?

Last Updated : 31 Jul, 2019

The task is find out whether an element is having child elements or not with the help of JavaScript. We’re going to discuss few techniques.

Approach:

Select the Parent Element.
Use one of the firstChild, childNodes.length, children.length property to find whether element has child or not.
hasChildNodes() method can also be used to find the child of the parent node.

Example 1: In this example, hasChildNodes() method is used to determine the child of <div> element.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to check if element has
        any children in JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"> 
        GeeksForGeeks
    </h1>
      
    <div id="div">
        <p id="GFG_UP" style=
            "font-size: 19px; font-weight: bold;">
        </p>
    </div>
      
    <button onclick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "color:green; font-size:24px; font-weight:bold;">
    </p>
      
    <script>
        var parentDiv = document.getElementById("div");
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to check "
                    + "whether element has children.";
  
        function GFG_Fun() {
            var ans = "Element <div> has no children";
              
            if (parentDiv.hasChildNodes()) {
                ans = "Element <div> has children";
            }
              
            el_down.innerHTML = ans;
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

Example 2: In this example, children.length Property is used to determine the child of <div> element.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to check if element has
        any children in JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"> 
        GeeksForGeeks
    </h1>
      
    <div id="div">
        <p id="GFG_UP" style=
            "font-size: 19px; font-weight: bold;">
        </p>
    </div>
      
    <button onclick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "color:green; font-size:24px; font-weight:bold;">
    </p>
      
    <script>
        var parentDiv = document.getElementById("div");
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to "+
                "check whether element has children.";
  
        function GFG_Fun() {
            var ans = "Element <div> has no children";
              
            if (parentDiv.children.length > 0) {
                ans = "Element <div> has children";
            }
              
            el_down.innerHTML = ans;
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles

How to check if an element has any children in JavaScript ?