Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery append() Method
jQuery | append() Method: Learn about the jQuery append() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022
append() Method
There are various jQuery built-in methods that help to add the specified content at a targeted location. We can put the content before or after a DOM element accordingly. Amongst these methods, one of the methods is – the append() method. The word 'append' signifies to add on something to already provided content. Therefore, the append() method appends the specified content to the selected element. That means it will add the content after the element.
append() Method Syntax
$("selector").append('Content', function());
This method takes in two parameters – content & function. The content has to be specified that you wish to append to the selected element. The function is an optional parameter, which can be declared according to the need. The content that is declared can contain HTML tags, DOM elements, jQuery objects, etc. The following example showcases the implementation of the append() method of jQuery. The specified content gets added to the end of the selected element.
jQuery append() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery - Append</h2>
<p>Click the button to append some content after the sentence in jQuery.</p>
<button>Append</button>
<hr>
<div>Name: </div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").append('<b>Enter Your Name</b>');
});
});
</script>
</html>
Output:
