If you want to add some content to the end of the text using jQuery, you can use jQuery Append function to perform this task.
You have to first select the HTML element using the jQuery selectors. After getting the required element you have to use the jQuery append function to add the content at the of the selected element.
Syntax
|
1 |
$(selector).append(content,function(index,html)) |
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | The parameter is used to select the required HTML element to append the content. It is the required parameter. |
| 2 | content | The parameter is used to specify the content to insert at the end of the selected element. It is the required parameter. |
| 3 | function(index,html) | The parameter is used to specify the function that returns the content which is inserted. It is the optional parameter. |
Example of jQuery Append Function
You can use below given example of jQuery append()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-append").click(function(){ $("#para-append").append("This is the appended text."); }); }); </script> <button id="btn-append">Click me to append</button> <p id="para-append">Welcome to the Tutorialdeep jQuery Tutorial.</p> |
Output
Welcome to the Tutorialdeep jQuery Tutorial.
The above example appends the text to the end of the p element when you click the button.
One thing you should notice here that when you click the button for more than one time, append function repeats the insertion of the text to the end of the content again and again. Just press the button for more than one time and you can see the change.
jQuery Append with HTML tags inside the content
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-appendtag").click(function(){ $("#para-appendtag").append("<span>This is the <strong>appended</strong> text with <b>HTML tags</b>.</span>"); }); }); </script> <button id="btn-appendtag">Click me to append</button> <p id="para-appendtag">This is the jQuery Tutorial.</p> |
Output
This is the jQuery Tutorial.
The above example contains the content with three tags span, strong and b. When you click the button, the jQuery append function inserts the content with the output of these tags.
Now, the same thing you should notice here as you have noted above, The number of times you click the button, the same number of times append function inserts the content at the end of the paragraph text.