Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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
Recommended Articles
Page :