contents method in jQuery with example

Home » jQuery Methods » contents method in jQuery with example

contents method in jQuery with example

Posted by 20Fingers2Brains on Tags: jQuery Methods

1. contents() method gets the children of each element in the set of matched elements, including text and comment nodes.

2. Given a jQuery object, contents method allows to search through the immediate children of the elements in the DOM tree and new object is constructed with new matching elements.

3. The contents() and children() methods are same, expect that contents() has text nodes and html elements both in the resulting jQuery object.

Example 1 :

        <html>
        <head>
        <title>contents</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("p").contents().filter("em").wrap("<h1>");
                });
                $("#reset").click(function () {
                    location.reload();
                });
            });
        </script>
        </head>
        <body>
        <p>This is <em>99codingexamples.</em> I love <em>jquery.</em></p>
        <input type="button" id="myButton" value="contents() filter by em"/>
        <input type="button" id="reset" value="Reset" />
        </body>
        </html>

Demo :

In the above example, we have a paragraph element. Inside paragraph we have nested em element to display "99codingexamples" and "jQuery".
On click of "contents() filter by em" we are selecting paragraph element and filtering the selected jQuery object with em element. Now the current jQuery object has em elements selected, and we are wrapping the selected em elements inside h1 element using wrap() method. contents() method not only selects text nodes but also selects html elements.

Example 2 :

        <html>
        <head>
        <title>contents</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = { 'font-family': 'comic sans ms',
                    'color': 'green',
                    'font-size': '24px'
                };
                $("#wrapEM").click(function () {
                    $("#parentDiv").contents().filter("em").css(css);
                });
                $("#wrapP").click(function () {
                    $("#parentDiv").contents().filter("p").css(css);
                });
                $("#wrapI").click(function () {
                    $("#parentDiv").contents().filter("i").css(css);
                });
                $("#wrapSpan").click(function () {
                    $("#parentDiv").contents().filter("span").css(css);
                });
                $("#reset").click(function () {
                    location.reload();
                });
            });
        </script>
        </head>
        <body>
        <div id="parentDiv">
        <em>This is em element.</em>
        <p>This is paragraph element.</p>
        <i>This is i element.</i><br />
        <span>This is span element.</span><br /><br />
        </div>
        <input type="button" id="wrapEM" value="contents() filter by EM"/>
        <input type="button" id="wrapP" value="contents() filter by p"/>
        <input type="button" id="wrapI" value="contents() filter by i"/>
        <input type="button" id="wrapSpan" value="contents() filter by span"/>
        <input type="button" id="reset" value="Reset" />
        </body>
        </html>

Demo :

In the above examples, we have used 4 elements, and their respective buttons. On click of each button, parent div's entire content is selected and it is filtered by respective button clicked element and CSS is applied. We are able to use filter() method just because contents() method selects html as well as text nodes.