In JavaScript, children property returns an array of those elements which are children of a given element.
In order to check whether the parent element (say x) contains a child element (say y), we can use the children property to get the array of all children of x and then check whether the array obtained contains y.Â
To get the child element of a parent element using JavaScript, we implement the code using this article.
Syntax:
var childrens=document.getElementById(parentElement).children;
Approach:
- Select the parent element
- Use children property to obtain an array of children of the parent element.
- Iterate over an array to find a child element, if it’s found, return true.
- Return false if not found.
Example:
HTML
<!DOCTYPE html> <html>   <head>           <body>       <div id="parent">         <h2>This is parent div</h2>           <p>This div contains various elements inside it.</p>             <p>Each HTML element is inside this div is child div</p>             <p>We need to check if element whose id is <b>'neveropen'</b>           is a child div of given parents div</p>           <p id="neveropen" style="color:green;">neveropen</p>           <button onclick="check('parent','neveropen')">Check</button>         <p id="result"></p>         </div>     </body>     <script>       function check(parentElement,childElement)       {         if(isChild(parentElement,childElement))           document.getElementById('result').innerHTML             =childElement+' is child of given parent element';         else           document.getElementById('result').innerHTML             =childElement+' is not child of given parent element';       }       /* Function that returns true if parent          element contains child element */       function isChild(parentElement,childElement)           {         var childrens = document.getElementById(parentElement).children;           console.log(parentElement);           for(let i=0;i<childrens.length;i++)           {             if(childrens[i]==document.getElementById(childElement))             {               return true;             }           }           return false;       }     </script>   </head> </html> |
Output:
Child of Parent
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
