# .contents()

## contents ( ) Returns: jQuery version added: 1.2

Description: Get the children of each element in the set of matched elements, including text and comment nodes.

Given a jQuery object that represents a set of DOM elements, the `.contents()` method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The `.contents()` and `.children()` methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.

The `.contents()` method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

Consider a simple `<div>` with a number of text nodes, each of which is separated by two line break elements (`<br>`):

    <div class="container">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.
      <br><br>
      Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.
    </div>

We can employ the `.contents()` method to help convert this blob of text into three well-formed paragraphs:

    $( ".container" )
      .contents()
        .filter(function() {
          return this.nodeType === 3;
        })
          .wrap( "<p></p>" )
          .end()
        .filter( "br" )
        .remove();

This code first retrieves the contents of `<div class="container">` and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the `.nodeType` property of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for `<br />` elements, and these elements are removed.

## Examples:

#### Example: Find all the text nodes inside a paragraph and wrap them with a bold tag.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

    <script>

    $( "p" )
      .contents()
      .filter(function(){
        return this.nodeType !== 1;
      })
      .wrap( "<b></b>" );

    </script>

    </body>
    </html>

#### Demo:

#### Example: Change the background colour of links inside of an iframe.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>

    <script>

    $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );

    </script>

    </body>
    </html>

#### Demo: