BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery after() Method

By Chaitanya Singh | Filed Under: jQuery

The jQuery after() method inserts the specified content after the selected elements.

Syntax of jQuery after() method

$(selector).after(content, function(n))

Here, content represents the content that is inserted after the selected elements. This content can be HTML elements, jQuery objects or DOM elements or a simple text/value.

$(selector): This selects the elements after which the content is inserted by after() method. Read more: jQuery selectors.

function(n): This is an optional parameter, it can be used when you need to insert content using the function. Here, n represents the index for the selected elements. Refer the second example to understand the use of function in after() method.

Example 1: jQuery after() – Adding text after the paragraphs

In this example, we are adding a text after each paragraph using after() method. On the click event, the method after() adds the specified text after the selected element (paragraphs in this example). If you keep clicking the button, the method would keep on adding the specified text on top of the previously added content by after() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hi BeginnersBook.com readers!</p>");
  });
});
</script>
</head>
<body>
<button>Insert specified message after each paragraph</button>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>

Output:
Before the button click:
jQuery after() Method
After the button click:
jQuery after() Method

Example 2: jQuery after() – Insert content using a function

We can insert the content after the selected element using a function as well. In this example, we are passing the function as a parameter to the after() method. This function returns the content that is added by the method, the content can be different for the selected elements based on index (represented by the n).

As you can see the content added is different for each paragraph as the index value is different for each paragraph. The first paragraph has index value as 0 and the second paragraph has index value 1 and so on.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(function(n){
      return "<div>Index of above paragraph is: " + n + ".</div>";
    });
  });
});
</script>
</head>
<body>
<h1>BeginnersBook.com Example: jQuery after() method</h1>
<button>Insert content after each paragraph</button>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>

Output:
Before the button click:
jQuery after() using function
After the button click:
jQuery after() using function

❮ jQuery toggleClass()jQuery before() ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap