The jQuery append() method is used to insert specified content as the last child (at the end of) the selected elements in the jQuery collection.
The append () and appendTo () methods are used to perform the same task. The only difference between them is in the syntax.
Syntax:
$(selector).append(content, function(index, html))
| Parameter | Description |
|---|---|
| Content | It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:
|
| Function (index,html) | It is an optional parameter. It specifies the function that returns the content to insert.
|
Let's take an example to demonstrate the jQuery append() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Newly added appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li><b>Newly added appended item</b></li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>Item no.1</li>
<li>Item no.2</li>
<li>Item no.3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append item</button>
</body>
</html>
