JavaScript check if element is child

Question

How can I check using JavaScript, if an HTML element is a child of a particular <div> element?

if (divElement == child){
   // do something...
}

EDIT: Thank you for the answers. I also had a similair question about descendants and found the answer here Check if div is descendant of another

https://developer.mozilla.org/en-US/docs/Web/API/Node/contains — epascarello, Jul 21 '16 at 12:09

score 4 · Accepted Answer · answered Jul 21 '16 at 12:41

4

The following code may help you determine whether the two elements of parent-child relationships.

function isChild (obj,parentObj){
    while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
        if (obj == parentObj){
            return true;
        }
        obj = obj.parentNode;
    }
    return false;
}

then use the result of isChild call as condition if statement.

if(isChild(child,divElement)){
    // doSomething...
}

answered Jul 21 '16 at 12:41

sept08

345
2
8

I believe this is the proper way of doing it, thanks – Alexander Jul 21 '16 at 13:10
doesn't this return true for the 2 same object..? isChild(child, child) = true ? – Sadern Alwis Dec 04 '21 at 12:20

LuizAsFight · Answer 2 · 2022-06-20T19:07:12.430

4

you can check either starting from parent element, or child element.

1- check if current element is inside the parent element parentEl.contains(el)

or

2- current element's parent is the parentElement we have stored el.parentNode === parentEl

edited Jun 20 '22 at 19:07

answered Dec 14 '18 at 18:32

LuizAsFight

222
1
7

score 3 · Answer 3 · answered Jul 21 '16 at 12:08

3

if (element.parentNode == divElement) { ... }

answered Jul 21 '16 at 12:08

henrybbosa

1,139
13
28

Sagi · Answer 4 · 2019-05-29T07:33:52.597

use contains function of Node - divElement.contains(child)
or this function in case contains does not exists.

function contains(first, second) {
    var adown = first.nodeType === 9 ? first.documentElement : first;

    if (first === second) {
        return true;
    }

    if (adown.contains) { 
        return adown.contains(second);
    }

    return first.compareDocumentPosition && first.compareDocumentPosition(second) & 16);
}

in case you need to return false when the nodes are the same

function notContains(first, second) {
    var adown = first.nodeType === 9 ? first.documentElement : first;

    if (first === second) {
        return false;
    }

    if (adown.contains) { 
        return !adown.contains(second);
    }

    return first.compareDocumentPosition && first.compareDocumentPosition(second) & 16) !== 16;
}

That will also return true if they are the same node. – Jul 21 '16 at 12:11 — , Jul 21 '16 at 12:11

score -1 · Answer 5 · answered Jul 21 '16 at 12:32

-1

Use nodeName to check

if(elementObj.parentElement.nodeName == "DIV"){
//Your Code
}

answered Jul 21 '16 at 12:32

Akku

11
1

JavaScript check if element is child

5 Answers5