Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 31 Jul, 2019
Improve Article
Save Article

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 arrow_drop_up
Related Articles

Start Your Coding Journey Now!