jQuery | prepend() with Examples - GeeksforGeeks

30 Aug, 2021
The prepend() method is an inbuilt method in jQuery which is used to insert a specified content at the beginning of the selected element. 
Syntax:  
$(selector).prepend(content, function)
Parameters: This method accept two parameters as mentioned above and described below:  
content: It is required parameter which is used to specify the content need to be inserted.
function: It is optional parameter which is used to specify the function to perform after call.
Return Value: This method returns the selected element with the specified changes made by prepend() method.Below examples illustrate the prepend() method in jQuery:Example 1: This example does not contains optional parameter.  
html
<!DOCTYPE html><html>   <head>       <title>The prepend Method</title>       <script src="       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">       </script>               <!-- jQuery code to show the working of this method -->       <script>         $(document).ready(function(){             $("button").click(function(){                 $("p").prepend("Welcome to  ");             });         });       </script>       <style>         div {             width: 350px;             height: 100px;             font-weight: bold;             padding:20px;             font-size: 25px;             border: 2px solid green;         }      </style>   </head>   <body>      <div>          <p>GeeksforGeeks!</p>          <!-- Click on this button to see the change -->         <button>Click Here!</button>      </div>   </body></html>
Output: Before click on the button:  
After click on the button:  
Example 2: This example contains optional parameter. 
html
<!DOCTYPE html><html>    <head>        <title>The prepend Method</title>        <script src=        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>                 <!-- jQuery code to show the working of this method -->        <script>            $(document).ready(function() {                $("button").click(function() {                    $("p").prepend(function() {                        return "<b>Hello  ";                                            });                });            });        </script>        <style>            div {                width: 350px;                height: 100px;                font-weight: bold;                padding:20px;                font-size: 25px;                border: 2px solid green;            }        </style>    </head>    <body>        <div>             <p>Contributor!</p>                          <!-- Click on this button to see the change -->            <button>Click Here!</button>        </div>    </body></html>
Output: Before click on the button:  
After click on the button:  
anikakapoor
jQuery-HTML/CSS
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?