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)) Parameters of jQuery append() method
| Parameter | Description |
|---|---|
| Content | It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:HTML elementsjQuery objectsDOM elements |
| Function (index,html) | It is an optional parameter. It specifies the function that returns the content to insert.Index: It returns the index position of the element in the set.HTML: It returns the current HTML of the selected element. |
Example of jQuery append() method
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>
Leave a Reply