How to check in Javascript if one element is a child of another

Question

Hello,

How can I check if one DOM element is a child of another DOM element? Are there any built in methods for this? For example, something like:

if (element1.hasChild(element2)) 

or

if (element2.hasParent(element1)) 

If not then any ideas how to do this? It also needs to be cross browser. I should also mention that the child could be nested many levels below the parent.

Thanks,

AJ

Answer 1

Using the parentNode property should work. It's also pretty safe from a cross-browser standpoint. If the relationship is known to be one level deep, you could check it simply:

if (element2.parentNode == element1) { ... }

If the the child can be nested arbitrarily deep inside the parent, you could use a function similar to the following to test for the relationship:

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}