How to check if an element has any children in JavaScript ?
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:
.png)
