jQuery | contents() with Examples
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.
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> <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:
Please Login to comment...