The append() method in jQuery is used to insert some content at the end of the selected elements.
Syntax:
$(selector).append( content, function(index, html) )
Parameters: This method accepts two parameters as mentioned above and described below:
- content: It is a required parameter and is used to specify the content which is to be inserted at the end of selected elements. The possible value of contents are HTML elements, jQuery objects, and DOM elements.
-
function(index, html): It is an optional parameter and is used to specify the function that will return the content to be inserted.
- index: It is used to return the index position of the element.
- html: It is used to return the current HTML of the selected element.
Example 1: This example appends the content at the end of the paragraph and list.
HTML
<!DOCTYPE html><html>
<head>
<title>
jQuery append() Method
</title>
<script src="
</script>
<!-- Script to append content -->
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>Append Geeks</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>Append Gfg</li>");
});
});
</script>
</head>
<body>
<h1 style="margin-left: 150px;">Geeks</h1>
<p>GeeksforGeeks</p>
<p>Jquery</p>
<ol>
<li>Gfg 1</li>
<li>Gfg 2</li>
<li>Gfg 3</li>
</ol>
<button id="btn1">Append Geeks</button>
<button id="btn2">Append Gfg</button>
</body>
</html>
|
Output:
Example 2: This example appends the content at the end of the paragraph.
HTML
<!DOCTYPE html><html>
<head>
<title>
jQuery append() Method
</title>
<script src="
</script>
<!-- Script to append content -->
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").append(function (n) {
return "<b> Index of Element is "
+ n + ".</b>";
});
});
});
</script>
</head>
<body>
<h1 style="margin-left:150px;">Geeks</h1>
<p>Geeks for Geeks</p>
<p>Jquery_append</p>
<button>
Insertion using Append Method()
</button>
</body>
</html>
|
Output:
