In this article, we are going to see how to use the append() method in jQuery. The append() method is used to insert new content inside an existing element. There are some other methods also that provide to insert new content inside an existing element and these are – prepend(), html(), text(), before(), after(), wrap(), etc.
Now, let’s try to understand the append() method in detail. This method is used to insert content to the end of the selected elements.
Syntax:
$(selector).append(content, function(index, html))
Parameters:
- content: It is a mandatory parameter that specifies the content that you want to insert. It can contain mainly 3 types of possible values and these are:
- function(index, HTML): It is an optional parameter that specifies the function that takes two parameters index and HTML that returns the contents that you want to insert.
Example: In this example, we will see the use of the append() method.
HTML
<!DOCTYPE html><html>
<head>
<title>
What is the use of append() method in JQuery?
</title>
<script src="
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('div').append(' GeeksforGeeks')
})
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>
What is the use of append() method in jQuery?
</h2>
<div>Welcome to</div>
<br>
<button id="btn">Append Text</button>
</body>
</html>
|
Output: