If you want to add some content to the end of the text then jQuery AppendTo function is the same method as jQuery Append function to perform this task.
There is only syntax difference between the jQuery appendTo() and jQuery append().
In jQuery AppendTo method, you have to first provide the content to add at the end of the HTML element then after you can use jQuery selectors to specify and access the HTML element.
Syntax
|
1 |
$(content).appendTo(selector) |
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | content | The parameter is used to provide the content you want to add at the end of the selected element. It is the required parameter. |
| 2 | selector | The parameter is used to select and access the required HTML element to append the content at the end. It is the required parameter. |
Example of jQuery AppendTo Function
You can use below given example of jQuery appendTo()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-appendto").click(function(){ $("<span>This is the appended text.</span>").appendTo("#mypara"); }); }); </script> <button id="btn-appendto">Click me to appendto</button> <p id="mypara">Welcome to the Tutorialdeep jQuery Tutorial to learn appendto.</p> |
Output
Welcome to the Tutorialdeep jQuery Tutorial to learn appendto.
The above example performs the same task of jQuery append function and adds the text to the end of the p element when you click the button.
The same thing you should notice here that when you click the given button for the number of times, appendto function repeats the insertion of the text to the end of the content again and again. You just press the button for more than one time and you can see the changes the function made to the content.