Main Tutorials

jQuery after() and insertAfter() example

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
4 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Enes SÖNMEZ
9 years ago

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().

sumit sharma
8 years ago
Reply to  Enes SÖNMEZ

Thanks for info I really didn’t know about this.

Matt Wohler
9 years ago

Best thing about this tutorial is showing side by side the 2 functions performing the same output. It’s so clear!

Prajwol Dangol
7 years ago

I think You are making fool out of visitors. Difference is syntax LOL.