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

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

3

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

answered Jul 21 '16 at 12:08

henrybbosa

1,121
11
28

score 3 · Answer 3 · answered Dec 14 '18 at 18:32

3

you can check either using

parentEl.contains(el)

or

el.parentNode === parentEl

answered Dec 14 '18 at 18:32

LuizAsFight

162
7

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