Both jQuery after() and insertAfter() methods are doing the same task, add a text or html content after the matched elements. The major difference is in the syntax.
For example,
<div class="greyBox">I'm a ipman</div>
<div class="greyBox">I'm a ipman 2</div>
1. $(‘selector’).after(‘new content’);
$('.greyBox').after("<div class='redBox'>Iron man</div>");
2. $(‘new content’).insertAfter(‘selector’);
$("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');
Result
Both methods above are doing the same task, but with different syntax, the new contents after after() or insertAfter() will become
<div class="greyBox">
I'm a ipman
</div>
<div class='redBox'>Iron man</div>
<div class="greyBox">
I'm a ipman 2
</div>
<div class='redBox'>Iron man</div>
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.greyBox{
padding:8px;
background: grey;
margin-bottom:8px;
width:300px;
height:100px;
}
.redBox{
padding:8px;
background: red;
margin-bottom:8px;
width:200px;
height:50px;
}
</style>
</head>
<body>
<h1>jQuery after() and insertAfter() example</h1>
<div class="greyBox">Ip man</div>
<div class="greyBox">Ip man 2</div>
<p>
<button id="after">after()</button>
<button id="insertAfter">insertAfter()</button>
<button id="reset">reset</button>
</p>
<script type="text/javascript">
$("#after").click(function () {
$('.greyBox').after("<div class='redBox'>Iron man</div>");
});
$("#insertAfter").click(function () {
$("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
I noticed huge memory leak & performance difference between insertAfter & after or insertBefore & before .. If you have tons of DOM elements, or you need to user after() or before() inside a MouseMove event, the browser memory will probably increase and next operations will run really slow. The solution I’ve just experienced is to use inserBefore instead before() and insertAfter instead after().
Thanks for info I really didn’t know about this.
Best thing about this tutorial is showing side by side the 2 functions performing the same output. It’s so clear!
I think You are making fool out of visitors. Difference is syntax LOL.