jQuery After() Method

jQuery after function add content after the HTML element you have selected. The content can be any HTML element you want to insert after the matched HTML element.

The jQuery append() and jQuery After() are different functions to perform different actions. jQuery Append function adds the content after the content of the HTML element while jQuery after() function add the content like HTML element after the matching content of the selected HTML element.

Check the syntax first to use this function.

Syntax

Sr. No Parameter Name Description
1 selector Specify the matched element using the selector parameter. It is the required field.
2 content Specify the content you want to put it after the matched content using the content parameter. It is the required field.
3 function(index) Use this parameter to specify the function that returns the content which is inserted. It is the optional parameter.

To use this function you have to first select the HTML element using the jQuery selectors. After getting the required element you have to specify the content that you want to put after the matched content.

See the examples given below to understand the function.

Example of jQuery After Function

You can use below given example of jQuery after().

Test it Live

Output

When you click the below button, it adds content after the below given content.

This is Tutorialdeep and your are learning jQuery Tutorial.

The example given above adds the specified content after the matched span element. Click the button and inspect the added content to find the effect.

The function added the specified content multiple times on the click of the button. Click the button for more than one time to see the difference.

Add Multiple Element Using the jQuery After()

To add multiple elements using the jQuery after(), you need to pass them inside the after function with comma separation.

Test it Live

Output

When you click the below button, it adds multiple content together after the below given content.

Welcome to our website Tutorialdeep.

Click the button given above to test the example and check the output. You can click the button multiple times to insert multiple contents multiple times.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ULTIMATE TOOLKIT Free eBook

Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id