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

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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Learn JavaScript For Beginners
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to float three div side by side using CSS?
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
Roadmap to Learn JavaScript For Beginners