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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: