jQuery insert content in Html using append & prepend(); In this tutorial, you will learn to insert/add content in HTML using jQuery append() and prepend() method.
jquery Inserts content beginning and end of elements
There are two methods available for inserting content beginning and end of html elements. You can use the methods of jquery append and prepend for insert content in html body.
- jQuery append() method
- jQuery prepend() method
jQuery append() Method
Using the jQuery append() method, you can insert the specified content to the end of the selected html elements. This method adds the content specified using the element id, name, class, tag, attribute, etc.
Syntax
$(selector).append(content, function(index, html));
Parameters of append () method
| Parameter | Description |
|---|---|
| Content | It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are: HTML elements, jQuery objects, DOM elements |
| Function (index,html) | It is an optional parameter. It specifies the function that returns the content to insert. Index : It returns the index position of the element in the set. HTML : It returns the current HTML of the selected element. |
Example 1 of jQuery append () method
You can see that below example of jQuery append method and also try it out here.
<!DOCTYPE html>
<html>
<head>
<title>Learn Jquery Append Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_append").click(function(){
$("#item_append").append("<li><b>New appended item</b></li>");
});
});
</script>
</head>
<body>
<ol id="item_append">
<li>Item no.1</li>
<li>Item no.2</li>
<li>Item no.3</li>
</ol>
<button id="btn_append" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Click here to Append item</button>
</body>
</html>
- Item no.1
- Item no.2
- Item no.3
jQuery prepend () Method
Using the jQuery prepend() method, you can insert the specified content to the beginning of the selected html elements. This method adds the content specified using the element id, name, class, tag, attribute etc.
Syntax
$(selector).prepend(content,function(index,html));
Parameters of jQueryprepend () method
| Parameter | Description |
|---|---|
| Content | It is a mandatory parameter. It specifies the content to insert. Its possible values are:HTML elementsjQuery objectsDOM elements |
| Function (index) | It specifies a function that returns the content which is used to insert.index: It provides the index position of the element in the set. |
Example of jQueryprepend () method
You can see that below example of jQuery prepend method and also try it out here.
<!DOCTYPE html>
<html>
<head>
<title>Learn Jquery Prepend Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_prepend").click(function(){
$("#item_prepend").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<ol id="item_prepend">
<li>Item no.1</li>
<li>Item no.2</li>
<li>Item no.3</li>
</ol>
<button id="btn_prepend" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Prepend list item</button>
</body>
</html>
- Item no.1
- Item no.2
- Item no.3
