The append method
The append method adds text to the end of an element. There is also a appendTo method that works in a similar way.
Syntax
Insert text at the end of an element:
$(selector).append(text);
You can add text to the end of the selected elements, which will be returned by a custom function. The function is called separately for each of the selected elements. When called, it is passed the following parameters: the position of the element in the set, the current content of the element:
$(selector).append(function(number in set, current element contents));
The content can also be not only plain text, but also a DOM element or jQuery object. In this case, these elements will move from their position in the HTML code.
Example
Let's insert some text at the end of the given paragraph:
<p id="test">text</p>
$('#test').append('!!!');
HTML the code will look like this:
<p id="test">text!!!</p>
Example
Let's insert text with tags at the end of the given paragraph:
<p id="test">text</p>
$('#test').append('<b>!!!</b>');
HTML the code will look like this:
<p id="test">text<b>!!!</b></p>
Example
Let's find all the paragraphs and put their serial number in the set at the end of each one:
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
$('p').append(function(index, text){return index;});
HTML the code will look like this:
<p>text0</p>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
See also
-
method
appendTo,
which adds text to the end of an element -
pseudo-element
after,
which adds text to the end of an element using CSS -
methods
prepend,before⁅/ c⁆, ⁅c href="/en/javascript/lib/jquery/manual/after/"⁆after,
allowing you to add content to a specific location
