jQuery insertAfter Examples
jQuery insertAfter is an easy to use method provided by jQuery. If you want to insert text or any other content, insertAfter the end of an element, then insertAfter method is for you. In this article, I am going to share info on the insertAfter() method along with easy to follow examples.
How to use the jQuery insertAfter() method
Let’s consider an example. This example assumes that we have few divs with class applied to each of them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have an individual button that will let you add content insertAfter the red and orange div. We also have another button that will reset the div back to their original state, once the jquery insertAfter method has been used on them dynamically.
Example: Here is the complete source code that shows how to use the insertAfter method in jQuery
<html>
<head>
<title>jQuery .insertAfter() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
background-color: #FFA6A6;
border: 1px solid red;
margin: 10px;
}
.green {
background-color: #CEFFCE;
border: 1px solid green;
margin: 10px;
}
.grey {
background-color: #EEEEEE;
border: 1px solid #CCC;
margin: 10px;
}
.orange {
background-color: #FF9900;
border: 1px solid #F60;
margin: 10px;
}
.blue {
background-color: #0099FF;
border: 1px solid #06C;
margin: 10px;
}
.purple {
background-color: #9966FF;
border: 1px solid #90F;
margin: 10px;
}
</style>
</head>
<body>
<div class="divs_container">
<div id="mydiv1" class="red">
This is my 1 div
<div id="mydiv2" class="green">
This is my 2 div
</div>
</div>
<div id="mydiv3" class="grey">
This is my 3 div
</div>
<p> </p>
<div id="mydiv4" class="orange">
This is my 4 div
<div id="mydiv5" class="blue">
This is my 5 div
</div>
<div id="mydiv6" class="purple">
This is my 6 div
</div>
</div>
</div>
<input type="button" name="sbt_insertAfter_green" id="sbt_insertAfter_green" value="Add Grey Div insertAfter Green">
<input type="submit" name="sbt_remove" id="sbt_remove" value="Undo">
<input type="button" name="sbt_insertAfter_orange" id="sbt_insertAfter_orange" value="Add Purple Div insertAfter Orange">
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var divs_container_html = $(".divs_container").html();
//Add Gray Div after Green
$('#sbt_insertAfter_green').on("click", function(){
$('.green').insertAfter($('.grey'));
});
//Add Orange Div after Purple
$('#sbt_insertAfter_orange').on("click", function(){
$('.orange').insertAfter($('.purple'));
});
//Reset the divs back to their original state
$('#sbt_remove').on("click", function(){
$(".divs_container").html(divs_container_html);
});
});
</script>
</body>
</html>Difference between jquery .after() and jquery .insertAfter()
In jQuery, the .after() and .insertAfter() methods have the same functioanlity. However, the main difference lies in the syntax. To be more precise, the syntax varies, in the placement of the content and target. Here’s an easy represenatation for your understanding:
Using jQuery .after();
$('target_selector').after(new_content);Using jQuery .insertAfter();
$('new_content').insertAfter('target_selector');Where the new_content can be a div, an image, HTML content, etc. If you would like a technical explanation of the above, here it is:
When .after() is used, the target selector appears before the method and the new content appears after the method.
When .insertAfter() is used, the target selector appears after the method and the new content appears before the method.
Hope that explains it!
That’s it for now!
Do you know of any other ways to use .insertAfter() method using jQuery? Feel free to suggest by commenting below.