javascript [No Jquery] Check if an element is inside a div or not

Question

I want to check if the element is not directly inside a div.

For example Consider the follwing markup-

If I place a div inside another div.

Then I could use this code-

if(document.getElementById('innerDiv').parentElement.id == 'outerDiv') )

where innerdiv is inside the outerdiv.

But what if I place four div's inside one another then how can i check that any div is inside the given div.

there may be a better option than using this code

innerelem.parentnode.parentnode.parentnode.parentnode

I hope i was able to explain what i want to do????

maybe get the inner html of the container div, and regex test it for occurances of `id='innerDiv'`? — Banana, Apr 17 '15 at 12:06
If you use the 1 option you have mentioned, it doesn't matter how many `div`s there are, it'll work. — Ganesh Jadhav, Apr 17 '15 at 12:06

score 4 · Answer 1 · answered Apr 17 '15 at 12:15

4

You can use Node.contains https://developer.mozilla.org/en-US/docs/Web/API/Node.contains:

if(document.getElementById('outerDiv').contains(document.getElementById('innerDiv')))

answered Apr 17 '15 at 12:15

Roland Jansen

2,733
1
16
21

score 3 · Accepted Answer · answered Apr 17 '15 at 12:06

there may be a better option than using this code

A couple of options:

If you really have ids (or anything else you can use to uniquely identify the inner element inside the outer one), then you can use querySelector:
```
if (document.getElementById("outerDiv").querySelector("#innerDiv")) {
    // Yes, it's inside it
} else {
    // No, it isn't
}
```
querySelector returns null if it doesn't find the element, and when you use it on an element, it only looks inside that element's descendants (not through the overall document). querySelector is supported by all modern browsers, and also IE8.

If you need more flexibility, a loop would be less brittle than .parentNode.parentNode...:

var node, inside;
inside = false;
for (node = innerelem; node; node = node.parentNode) {
    if (node.id === 'outerDiv') {
        inside = true;
        break;
    }
}

score 2 · Answer 3 · answered Apr 17 '15 at 12:10

You can create a function like this:

function findUpId(innerId, outerId) {
    var el = document.getElementById(innerId);
    while (el.parentNode) {
        el = el.parentNode;
        if (el.id === outerId)
            return true;
    }
    return false;
}

You can then call:

var inside = findUpId("innerDiv","outerDiv");

score 1 · Answer 4 · answered Apr 17 '15 at 12:09

<html>
<body>
<div id="oInput">
    <input id="1" type="text">
    <input id="2" type="text">
    <input id="3" type="text">
    <input id="4" type="text">
    <input id="5" type="text">
</div>
<script type="text/javascript">
    var oInput = document.getElementById('oInput'), oChild;
    for(i = 0; i < oInput.childNodes.length; i++){
        oChild = oInput.childNodes[i];
        if(oChild.id== 'your id'){
            alert('it is child');
        }
    }
</script>
</body>
</html>

score 1 · Answer 5 · edited May 23 '17 at 10:28

1

Refer to https://stackoverflow.com/a/2631931/3940047 and find the method getPathTo(element)

You can execute that to get the xpath of the element you're referring to. You can check in the xpath if your element is inside a given div id.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 17 '15 at 12:12

Pavan Kumar

4,182
1
30
45

javascript [No Jquery] Check if an element is inside a div or not

5 Answers5