Updated March 23, 2023
Introduction to jQuery append()
The jQuery append( ) method is used to append the specified content to the selected HTML elements in the jQuery collection. This method is a built-in method of jQuery. The jQuery append( ) method is used to insert the specified content to the selected HTML element at the end as the last child. The jQuery append( ) method is the opposite of the jQuery prepend( ) method, the jQuery append( ) method inserts the content at the end of the selected HTML elements, whereas the jQuery prepend( ) method insert the content at the beginning of the selected HTML elements. Alternate to the jQuery append( ) method jQuery is having the jQuery appendTo( ) method which performs the same task, but the difference between them is the syntax.
Syntax:
$(selector).append( content, function( index, Currenthtml )This method is used to append the content to the selected element.
Parameters
- content: content parameter is not an optional parameter, which is used to specify the content to be inserted at the end. The content parameter can accept the values as HTML elements, DOM elements, and its objects.
- function ( index, Currenthtml ): function ( index, Currenthtml ) parameter is an optional parameter, which is used to specify the name of a function to execute and return the content to be inserted at the end.
- Index: index is used to specify an index position of the element in the set.
- Currenthtml: Currenthtml is used to specify the current HTML of the selected element.
Examples for jQuery append() method
Below are examples to implement:
Example #1 – Method with content parameters
Next, we write the Html code to understand this method more clearly with the following example, the append( ) method used to insert the content to the first and second heading element:
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery append( ) method </title>
<!-- code to show the jQuery append( ) working method -->
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").append("<br><b> Heading appended </b>. ");
});
});
</script>
</head>
<body>
<h1>This is the first heading.</h1>
<h1>This is the second heading.</h1>
<br><button id="btn"> Click here to append a text </button>
</body>
</html>Output:
Once the Click button click, the output is:
In the above code, the append( ) method is using and as in output we can see that the append( ) method inserts the specified content at the end of the selected elements that are < h1 >in the jQuery collection.
Example #2 – Method with Content Parameter
Next example code where the jQuery append() method to append the text to the headings and to list of elements as well, as in the below code –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery append( ) method </title>
<!-- code to show the jQuery append( ) working method -->
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").append("<b> Appended text </b>. ");
});
$("#btn1").click(function(){
$("ol").append("<li> Appended item </li>");
});
});
</script>
</head>
<body>
<h1>This is the first heading.</h1>
<h1>This is the second heading.</h1>
<ol>
<li> List item no.1 </li>
<li> List item no.2 </li>
<li> List item no.3 </li>
</ol>
<button id="btn"> Heading Append </button>
<button id="btn1"> list item Append </button>
</body>
</html>Output:
Once we click the “ Heading Append ” button, the output is:
Once we click the “list item Append ” button, the output is:
Example #3 – Method with content parameter
In the next example code, we rewrite the above code for its method to append text in property boxes. As shown in the below example.
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery append( ) method </title>
<!-- code to show the jQuery append( ) working method -->
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").append("<b>appended text</b>. ");
});
$("#btn1").click(function(){
$("ol").append("<li>appended item</li>");
});
});
</script>
<style>
h1 {
width : 400px;
height: 100px;
font-weight : bold;
padding : 40px;
font-size : 20px;
border : 2px solid red;
}
</style>
</head>
<body>
<h1> This is the first heading. </h1>
<h1> This is the second heading. </h1>
<ol>
<li> List item no.1 </li>
<li> List item no.2 </li>
<li> List item no.3 </li>
</ol>
<button id="btn"> Heading append </button>
<button id="btn1"> list item append </button>
</body>
</html>Output:
Once we click the “ Heading append ” button, the output is:
Once we click the “list item append ” button, the output is:
Example #4 – Method with function parameter
Next example code where this method accepts a function and which is executed to insert the append text. As shown in the below example –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery append( ) method </title>
<!-- code to show the jQuery append( ) working method -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("h1").append(function() {
return "<b> appended text </b> ";
});
});
});
</script>
<style>
h1 {
width : 400px;
height: 100px;
font-weight : bold;
padding : 40px;
font-size : 20px;
border : 2px solid red;
}
</style>
</head>
<body>
<h1> This is the first heading. </h1>
<h1> This is the second heading. </h1>
<!-- Click on this button to see the change -->
<button id="btn"> Heading Append </button>
</body>
</html>Output:
Once we click the button, the output is:
Conclusion
The append( ) method is one of the methods which is used to append the specified content to the selected HTML elements. The jQuery prepend( ) method also performs the same task but it inserts the content at the beginning of the selected elements.
Recommended Articles
This is a guide to jQuery append(). Here we discuss an introduction, parameter, and examples to implement the jQuery append() with their proper codes and outputs. You can also go through our other related articles to learn more –
