The jQuery appendTo() method can be used to add or insert the HTML content at the end of the selected element. You have to specify the selector inside the appendTo() method.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The above syntax contains 2 parameters to use with the method. The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and add the content at the end. You can use tag name, class name, or id of the elements to select. It is a required field. |
| content | It is the HTML content you have to specify to insert at the end of the selected elements. It is a required field. You can specify HTML elements, jQuery objects, and DOM elements as the values of this parameter. |
jQuery appendTo() Method to Insert Content At the End
If you want to add the content at the end of the selected element, you have to use this method. It requires a selector to specify as the parameter of the method. See the example given below to find the ways to use and add the content.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.appendtobtn').click(function(){ $("<em>Welcome to TutorialDeep!</em>").appendTo("p"); }); }); </script> <p>This is my paragraph.</p><br> <button type="button" class="appendtobtn">Click to Append To</button> |
Output
This is my paragraph.
You have to click the button given above to add the content at the end. The above example inserts an italic text content at the end of the selected paragraph.
It is a little bit different between the appendTo method and the append method. The append method requires parameter as HTML content while the appendTo method requires parameter as a selector.
You may also like to read
I hope you like this tutorial on jQuery appendTo() method. If you have any queries regarding the tutorial, please comment below.
References