jQuery after()

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

jQuery after()

The jQuery after() method is used to insert specified content after the selected element. It is just like jQuery append() method.

If you want to insert content before the selected element, you should use jQuery before() method.


  1. $(selector).after(content,function(index))   

Parameters of jQuery after() method

Parameter Description
Content It is a mandatory parameter. It specifies the content to insert. Its possible values are:
  • HTML elements
  • jQuery objects
  • DOM elements
Function (index) It specifies a function that returns the content which is used to insert.
  • index: It provides the index position of the element in the set.

Example of jQuery after() method

Let's see an example of jQuery after() 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.     $("button").click(function(){  
  8.         $("p").after("<p><b>Hello javatpoint.com</b></p>");  
  9.     });  
  10. });  
  11. </script>  
  12. </head>  
  13. <body>  
  14. <button>Insert content after each p element</button>  
  15. <p>This is a tutorial website.</p>  
  16. <p>This is a training institute.</p>  
  17. </body>  
  18. </html>  

Test it Now


Insert content after each p element

This is a tutorial website.

This is a training institute.