How to check if an element has any children in JavaScript ?
Last Updated :
20 Dec, 2023
The task is to find out whether an element has child elements or not with the help of JavaScript. We’re going to discuss a few techniques.
Approach
- Select the Parent Element.
- Use one of the firstChild, childNodes.length, children.length property to find whether an element has a child or not.
- hasChildNodes() method can also be used to find the child of the parent node.
- Node.contain method: return a boolean valueÂ
Example 1: In this example, hasChildNodes() method is used to determine the child of <div> element.Â
html
< html >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< div id = "div" >
< p id = "GFG_UP" >
</ p >
</ div >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" >
</ p >
< script >
let parentDiv = document.getElementById("div");
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to check "
+ "whether element has children.";
function GFG_Fun() {
let ans = "Element < div > has no children";
if (parentDiv.hasChildNodes()) {
ans = "Element < div > has children";
}
el_down.innerHTML = ans;
}
</ script >
</ body >
</ html >
|
Output:
How to check if an element has any children in JavaScript ?
Example 2: In this example, children.length Property is used to determine the child of <div> element.Â
html
< html >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< div id = "div" >
< p id = "GFG_UP" >
</ p >
</ div >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" >
</ p >
< script >
let parentDiv = document.getElementById("div");
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to " +
"check whether element has children.";
function GFG_Fun() {
let ans = "Element < div > has no children";
if (parentDiv.children.length > 0) {
ans = "Element < div > has children";
}
el_down.innerHTML = ans;
}
</ script >
</ body >
</ html >
|
Output:
How to check if an element has any children in JavaScript ?
Example 3: In this example, we are using Node.contain a method to determine the child element.
HTML
< html >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< div id = "GFG" >
< p id = "gfg" > Click on the button to check
whether element has children.</ p >
</ div >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "result" ></ p >
< script >
function GFG_Fun() {
let parent = document.getElementById("GFG");
let child = document.getElementById("gfg");
document.getElementById("result").innerHTML =
"Does Element contain child: " + parent.contains(child)
}
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...