JavaScript .contains() Method Example – Check if Element <div> Contains a <p> Element

I came across a situation where I had to figure out, at run time, what type of elements is inside in 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 the Element is an Image using JavaScript tagName Property

Next - Display Data with Paging using jQuery Ajax Web API>>



Related Posts:

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+
comments powered by Disqus

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