Home »
jQuery »
jQuery Examples
jQuery append(), prepend(), after() and before() Methods
In this tutorial, we are going to discuss some popular methods (append(), prepend(), after() and before()) of jQuery and difference between them.
Submitted by Pratishtha Saxena, on June 17, 2022
jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and also event handling. It is free, open-source software. It is user friendly and easy to learn and understand.
Note: Always remember to apply the CDN link while working with jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
There are different methods designed in jQuery to insert anything in between the specified element. They help in inserting any text, or even one element into another. These methods are:
- append()
- prepend()
- after()
- before()
1) jQuery append() Method
As the name suggests, append, which means to insert or add something to an already given item. This method inserts the content to the specified location, i.e., the selected element. But it always appends it at the end of the selected element.
Syntax:
$(selector).append(content)
Here, the selector is the HTML element selected or the id of the element to which the content has to be added.
Example 1:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").append($("#ChildDiv"));
})
</script>
Output:
2) jQuery prepend() Method
This method also works the same as the append() method, i.e., it also inserts the specified content to the selected element. But the only difference is that it inserts the content at the beginning of the selected element. pre in prepend() indicates that it will add the content at the beginning.
Syntax:
$(selector).prepend(content)
Here, the selector is the HTML element selected or the id of the element to which the content has to be added.
Example 2:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").prepend($("#ChildDiv"));
})
</script>
Output:
3) jQuery after() Method
Now, the after() method in jQuery also inserts the content to the target location, but it inserts the content after the selected element. Then what is the difference between append() and after as both inserts the content at the end? They differ as append() appends the content at the end of the selected HTML element but inside the element. Whereas after() adds the content outside the selected HTML element.
Syntax:
$(selector).after(content)
The selector here is the HTML element selected or the id of the element to which the content has to be added.
Example 3:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").after($("#ChildDiv"));
})
</script>
Output:
4) jQuery before() Method
Similarly, before() will insert the content before and outside the selected element. It works similar to the after() method.
Syntax:
$(selector).before(content)
The selector here is the HTML element selected or the id of the element to which the content has to be added.
Example 4:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").before($("#ChildDiv"));
})
</script>
Output:
Advertisement
Advertisement