jQuery contents() Method

Last Updated : 07 Jul, 2023

The contents() is an inbuilt method in jQuery that returns all the direct children, including text and comment nodes for the selected element.

Syntax:

$(selector).contents()

Parameter: It does not accept any parameter.

Return Value: It returns all the direct children elements of the selected element.

jQuery code to show the working of this method:

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            //jQuery code to perform this method
            $("button").click(function () {
                $("div").contents().filter("p").wrap("<b/>");
            });
        });
    </script>
    <style>
        #p1 {
            width: 420px;
            padding: 50px;
            display: block;
            border: 2px solid green;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div>
        <!-- This paragraph will get bold after click on
            the button -->
        <p id="p1">Welcome to GeeksforGeeks !!!</p>
    </div>
    <!-- click on this button -->
    <button>Click Me!</button>
    <br>
</body>

</html>

Output:

jquery-6

Example 2: In the below code, no need to click on any button.

html

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
   </script>
    <style>
        #p1 {
            display: block;
            width: 400px;
            padding: 30px;
            border: 2px solid green;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- This paragraph will get bold -->
    <p id="p1">
        Welcome to GeeksforGeeks !
    </p>
    <script>
        $("p")
            .contents()
            .filter(function () {
                return this.nodeType !== 1;
            })
            .wrap("<b></b>");
    </script>
</body>

</html>