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 actions performing functions. 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 mathed 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 you 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()

Output



Tutorialdeep 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 click of the button. Click the button for more than one times 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.

Output



Tutorialdeep jQuery Tutorial.

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

Leave a Reply

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