How to Check if an element is a child of a parent using JavaScript? - GeeksforGeeks

31 Oct, 2019
Method 1: Using the Node.contains() methodThe Node.contains() method is used to check if a given node is the descendant of another node at any level. The descendant may be directly the child’s parent or further up the chain. It returns a boolean value of the result.This method is used on the parent element and the parameter passed in the method is the child element to be checked. It returns true if the child is a descendant of the parent. This means that the element is a child of the parent.Syntax:function checkParent(parent, child) {    if (parent.contains(child))        return true;        return false;}Example:<html>  <head>    <title>        How to Check if an element is a       child of a parent using JavaScript?    </title>    <style>        .parent,        .child,        .non-child {            border: 2px solid;            padding: 5px;            margin: 5px;        }    </style></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>    <b>      How to Check if an element is      a child of a parent using JavaScript?    </b>    <div class="parent">This is the parent div.        <div class="child">This is the child div.        </div>    </div>    <div class="non-child">        This is outside the parent div.    </div>    <p>Click on the button to check if the       elements are child of a parent.</p>    <p>Child has parent:        <span class="output-child"></span>    </p>    <p>Non-Child has parent:        <span class="output-non-child"></span>    </p>      <button onclick="checkElements()">        Check elements    </button>    <script>        function checkParent(parent, child) {            if (parent.contains(child))                return true;            return false;        }          function checkElements() {            parent = document.querySelector('.parent');            child = document.querySelector('.child');            non_child = document.querySelector('.non-child');              output_child = checkParent(parent, child);            output_non_child = checkParent(parent, non_child);              document.querySelector('.output-child').textContent =                output_child;            document.querySelector('.output-non-child').textContent =                output_non_child;        }    </script></body>  </html>Output:Before clicking the button:After clicking the button:
This method is used on the parent element and the parameter passed in the method is the child element to be checked. It returns true if the child is a descendant of the parent. This means that the element is a child of the parent.
Syntax:
function checkParent(parent, child) {    if (parent.contains(child))        return true;        return false;}
Example:
<html>  <head>    <title>        How to Check if an element is a       child of a parent using JavaScript?    </title>    <style>        .parent,        .child,        .non-child {            border: 2px solid;            padding: 5px;            margin: 5px;        }    </style></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>    <b>      How to Check if an element is      a child of a parent using JavaScript?    </b>    <div class="parent">This is the parent div.        <div class="child">This is the child div.        </div>    </div>    <div class="non-child">        This is outside the parent div.    </div>    <p>Click on the button to check if the       elements are child of a parent.</p>    <p>Child has parent:        <span class="output-child"></span>    </p>    <p>Non-Child has parent:        <span class="output-non-child"></span>    </p>      <button onclick="checkElements()">        Check elements    </button>    <script>        function checkParent(parent, child) {            if (parent.contains(child))                return true;            return false;        }          function checkElements() {            parent = document.querySelector('.parent');            child = document.querySelector('.child');            non_child = document.querySelector('.non-child');              output_child = checkParent(parent, child);            output_non_child = checkParent(parent, non_child);              document.querySelector('.output-child').textContent =                output_child;            document.querySelector('.output-non-child').textContent =                output_non_child;        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Method 2: Looping through the parents of the given childThe child can be checked to have the given parent by continuously looping through the element’s parents one by one. The parent of each node is found by accessing the parentNode property which returns the parent node if any.A while loop is used until the parent required is found or no more parent elements exist. Inside this loop, each element’s parent node is found in every iteration. If the parent node matches the given one in any iteration, it means that the element is a child of the parent.Syntax:function checkParent(parent, child) {    let node = child.parentNode;      // keep iterating unless null    while (node != null) {        if (node == parent) {            return true;        }     node = node.parentNode;     }   return false;}Example:<html>  <head>    <title>        How to Check if an element is a       child of a parent using JavaScript?    </title>    <style>        .parent,        .child,        .non-child {            border: 2px solid;            padding: 5px;            margin: 5px;        }    </style></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>    <b>      How to Check if an element is      a child of a parent using JavaScript?    </b>    <div class="parent">This is the parent div.        <div class="child">This is the child div.        </div>    </div>    <div class="non-child">        This is outside the parent div.    </div>    <p>Click on the button to check if       the elements are child of a parent.</p>    <p>Child has parent:        <span class="output-child"></span>    </p>    <p>Non-Child has parent:        <span class="output-non-child"></span>    </p>      <button onclick="checkElements()">        Check elements    </button>    <script>        function checkParent(parent, child) {            let node = child.parentNode;              // keep iterating unless null            while (node != null) {                if (node == parent) {                    return true;                }                node = node.parentNode;            }            return false;        }          function checkElements() {            parent = document.querySelector('.parent');            child = document.querySelector('.child');            non_child = document.querySelector('.non-child');              output_child = checkParent(parent, child);            output_non_child = checkParent(parent, non_child);              document.querySelector('.output-child').textContent =                output_child;            document.querySelector('.output-non-child').textContent =                output_non_child;        }    </script></body>  </html>Output:Before clicking the button:After clicking the button:
A while loop is used until the parent required is found or no more parent elements exist. Inside this loop, each element’s parent node is found in every iteration. If the parent node matches the given one in any iteration, it means that the element is a child of the parent.
Syntax:
function checkParent(parent, child) {    let node = child.parentNode;      // keep iterating unless null    while (node != null) {        if (node == parent) {            return true;        }     node = node.parentNode;     }   return false;}
Example:
<html>  <head>    <title>        How to Check if an element is a       child of a parent using JavaScript?    </title>    <style>        .parent,        .child,        .non-child {            border: 2px solid;            padding: 5px;            margin: 5px;        }    </style></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>    <b>      How to Check if an element is      a child of a parent using JavaScript?    </b>    <div class="parent">This is the parent div.        <div class="child">This is the child div.        </div>    </div>    <div class="non-child">        This is outside the parent div.    </div>    <p>Click on the button to check if       the elements are child of a parent.</p>    <p>Child has parent:        <span class="output-child"></span>    </p>    <p>Non-Child has parent:        <span class="output-non-child"></span>    </p>      <button onclick="checkElements()">        Check elements    </button>    <script>        function checkParent(parent, child) {            let node = child.parentNode;              // keep iterating unless null            while (node != null) {                if (node == parent) {                    return true;                }                node = node.parentNode;            }            return false;        }          function checkElements() {            parent = document.querySelector('.parent');            child = document.querySelector('.child');            non_child = document.querySelector('.non-child');              output_child = checkParent(parent, child);            output_non_child = checkParent(parent, non_child);              document.querySelector('.output-child').textContent =                output_child;            document.querySelector('.output-non-child').textContent =                output_non_child;        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
JavaScript-Misc
Picked
JavaScript
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to execute PHP code using command line ?