Skip to content
Related Articles

Related Articles

jQuery | contents() with Examples
  • Last Updated : 13 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

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:

Code #1:




<html>
  
<head>
               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:
Before clicking the “Click Me!” button-

After clicking the “Click Me!” button-

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




<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>

Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :