Description:
The jQuery append() method is used to insert specified content to the end of the set of matched elements.
Syntax
- $(selector).append(content)
- $(selector).append(content, function(index, html))
| Content | It specifies the content which need to append. |
| Function (index,html) | It specifies the function that returns(HTML string, DOM element(s)) the content to insert.
Index: Returns the index position of the element. HTML: Returns the current HTML of the selected element. |
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
.container {
border: 5px solid #1a80b6;
padding: 10px;
display: inline-block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.btnClass').click(function () {
$("#divcontainer").append('<div style="color:#ff0000"> This is Newly added text', function (index, html) { alert("hi") });
})
});
</script>
</head>
<body>
<button class="btnClass" id="addMethod">Append New Text</button><br /><br />
<div id="divcontainer" class="container">
<div>
This is Default text
</div>
</div>
</body>
</html>
Output:
