jQuery - Append() Method | Example

The jQuery append() method adds the content you want in any element of your page. The append() method can append content to a single element or to multiple elements.

Append content to Singal elements

In this tutorial, we will use a button that will add a new "li" element each time the button is clicked.

Example:

• Element 1
• Element 2
• Element 3

<ul>
	<li>Element 1</li>
	<li>Element 2</li>
	<li>Element 3</li>
</ul>

<input type="button" id="button" value="Add Element" />

When the element with the id "button" is clicked, the append() method will add a new "li" element in the "ul" element.

<script type="text/javascript">

$('#button').click(function(){

	$('ul').append('<li>New element</li>');

});

</script>

Append content to multiple elements

You can use the append() method to insert content into several elements at the same time.
In this example, we will use a button that will add some text in each "div" each time the button is clicked.

Div 1

Div 2

Div 3

This button will append a new paragraph in each "div"

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>

<input type="button" id="button" value="Add Element" />

<script type="text/javascript">

$('#button').click(function(){

	$('div').append('<p>New paragraph</p>');
});

</script>

Append before / Append after

If you want to append content before a specific element, you may want to use before() or prepend()

If you want to append content after a specific element, you may want to use after()