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
|
1 |
$(selector).after(content,function(index)) |
| 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().
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $("#btn-after").click(function(){ $("#para-after").after("<i class='fa fa-envelope'></i>"); }); }); </script> <p>When you click the below button, it adds content after the below given content.</p> <button id="btn-after">Click me to Add After</button><br><br> <span id="para-after">This is Tutorialdeep and your are learning jQuery Tutorial.</span> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $("#btn-aftermultiple").click(function(){ var mypara1 = " Tutorialdeep is a Blogging and Tutorial website. "; var mypara2 = "Here, you can <b>Learn jQuery</b> "; var mypara3 = "<em>With Live Examples</em>."; $("#para-aftermultiple").after(mypara1,mypara2,mypara3); }); }); </script> <p>When you click the below button, it adds multiple content together after the below given content.</p> <button id="btn-aftermultiple">Click me to Add After</button><br><br> <span id="para-aftermultiple">Welcome to our website Tutorialdeep.</span> |
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.