jQuery prepend()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery prepend()

The jQuery prepend() method is used to insert the specified content at the beginning (as a first child) of the selected elements. It is just the opposite of the jQuery append() method.

If you want to insert the content at the end of the selected elements, you should use the append method.

Syntax:

  1. $(selector).prepend(content,function(index,html))  

Parameters of jQuery prepend() method

Parameter Description
Content It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:
  • HTML elements
  • jQuery objects
  • DOM elements
Function (index, html) It is an optional parameter. It specifies a function that returns the content which is inserted.
  • Index:It is used to provide the index position of the element in the set.
  • Html: : It provides the current HTML of the selected element.

Example of jQuery prepend() method

Let's take an example to demonstrate the jQuery prepend() method.

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
  5. <script>    
  6. $(document).ready(function(){    
  7.     $("#btn1").click(function(){    
  8.         $("p").prepend("<b>Prepended text</b>. ");    
  9.     });    
  10. });    
  11. </script>    
  12. </head>    
  13. <body>    
  14. <p>This is the first paragraph.</p>    
  15. <p>This is the second paragraph.</p>    
  16. <button id="btn1">Prepend text</button>    
  17. </body>    
  18. </html>    

Test it Now

Output:

This is the first paragraph.

This is the second paragraph.

Prepend text

jQuery prepend() example 2

  1. <!DOCTYPE html>  
  2. <html>
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("#btn1").click(function(){  
  8.         $("p").prepend("<b>Prepended text</b>. ");  
  9.     });  
  10.     $("#btn2").click(function(){  
  11.         $("ol").prepend("<li>Prepended item</li>");  
  12.     });  
  13. });  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <p>This is the first paragraph.</p>  
  18. <p>This is the second paragraph.</p>  
  19. <ol>  
  20.   <li>Item no.1</li>  
  21.   <li>Item no.2</li>  
  22.   <li>Item no.3</li>  
  23. </ol>  
  24. <button id="btn1">Prepend text</button>  
  25. <button id="btn2">Prepend list item</button>  
  26. </body>  
  27. </html>  

Test it Now

Output:

This is the first paragraph.

This is the second paragraph.

  1. Item no.1
  2. Item no.2
  3. Item no.3

Prepend text Prepend list item

jQuery prepend() example 3

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>prepend demo</title>  
  6.   <style>  
  7.   p {  
  8.     background: lightpink;  
  9.   }  
  10.   </style>  
  11.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  12. </head>  
  13. <body>  
  14.  <p>javatpoint.com</p>  
  15. <p>Guys! Welcome to the best tutorial site.</p>  
  16.  <script>  
  17. $( "p" ).prepend( "<b>Hello </b>" );  
  18. </script>  
  19.  </body>  
  20. </html>  

Test it Now

Output:

Hello javatpoint.com

Hello Guys! Welcome to the best tutorial site.

Here, "Hello" is the prepended text.