How to Check if DIV Element contains P Element using JavaScript .contains() Method

I recently came across a situation where I had to figure out, at run time, what type of elements are inside a <div> element, or are Descendants of a DIV element. The DIV on my page acts as a container. Therefore, there are few different elements and I wanted to know if my <div> has any <p> element or paragraphs. The JavaScript .contains() method has the solution.

Syntax of .contains() Method

Node.contains(another_node)

The .contains() method checks if a node contains another node, as child, grandchild and so on. It returns a Boolean value, that is, true if the node is a child (or grandchild, great grandchild, etc.) of another node and false if it’s not a child.

The method takes a parameter as a node. Let’s see an example.

The Markup
<body>
    <div id="cont">
        <p id="p1">PARA 1</p>
        <div id="div1">DIV 1</div>
    </div>
</body>

The container <div> (id="cont") has two different elements, a <p> and another <div>. I want to check any <p> is inside (as child) the parent <div> element.

The Script

I’ll now use the JavaScript .contains() method to check if <p> is child of <div>.

<script>
    window.onload = function () {
        var p = document.getElementById('p1');
        var divContains_P = document.getElementById('cont').contains(p);

        alert(divContains_P);
    }
</script>

The alert will show a message either a true or false. See, I am checking the node using its id. Therefore, if p1 is a child node, the result will be true.

Similarly, you can check for other elements (or nodes). For example, I have a <div> element too as a child.

var div = document.getElementById('div1');
var divContains_Div = document.getElementById('cont').contains(div);

alert(divContains_Div);

Now, let’s check if the <p> element is inside the second <div> element. In this case, the <p> element is a grandchild of the parent <div> element and child of the second <div> element.

Also Read: Using children Property – Get All the Elements inside a DIV Element in JavaScript

The Markup
<div id="cont">
    <div id="div1">
        DIV element (Child)

        <p id="p1">
            Content inside a Paragraph (Grandchild)
        </p>
    </div>
</div>
The Script

The .contain() method can still find the <p> (though it is now a grandchild).

<script>
    window.onload = function () {
        var p = document.getElementById('p1');
        var divContains_P = document.getElementById('cont').contains(p);

        alert(divContains_P);
    }
</script>

The .contains() method is a very useful method as it simplifies your search to find if an element or node is a descendant (child) of another node or element. Once you see a true (result), you can read, manipulate or do anything with the element’s contents.

That’s it. Thanks for reading.

Previous - Check if URL contains a given string using JavaScript or jQueryNext - Display Data with Paging using jQuery Ajax Web API



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!