The jQuery append() method can be used to add or insert the specified content at the end of the selected element. It’s useful when you want to add the content after other content.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The above syntax contains 4 parameters to use the method. The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and append the specified content. You can use tag name, class name, or id of the elements to select. It is a required field. |
| content | It is the content you want to add to the end of the selected elements. It is a required field. You can use HTML elements, jQuery objects, and DOM elements as the values of this parameter. |
| index | It is used to return the index position of the element. |
| current_html | It can be used to return the current HTML of the selected element |
jQuery append() Method to Insert Content At the End
If you want to insert the content at the end of the selected content, you can use this method. You can add text, HTML, or any other DOM elements after the selected content. You have to specify the content to insert as given in the example below.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.appendbtn').click(function(){ $("p").append("<em>Welcome to TutorialDeep!</em>"); }); }); </script> <p>This is my paragraph.</p><br> <button type="button" class="appendbtn">Click to Append</button> |
Output
This is my paragraph.
You have to click the button given above to insert the content at the end. The above example appends an italic text content at the end of the paragraph.
Add Content At The End Using Function
You can also use the function to insert the content at the end of the selected element. Specify the content in the function as given in the example below.
Example
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $('.appendfnbtn').click(function(){ $("p").append(function(){ return "<b>This is a bold content.</b>"; }); }); }); </script> <p>This is my paragraph.</p><br> <button type="button" class="appendfnbtn">Click to Append</button> |
Output
This is my paragraph.
When you click the button given above, the content gets inserted at the end of the paragraph. The method adds the bold content after the selected element.
You may also like to read
I hope you like this tutorial on jQuery append() method. If you have any queries regarding the tutorial, please comment below.
References