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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Prajwol Dangol
Guest
Prajwol Dangol

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

Enes SÖNMEZ
Guest
Enes SÖNMEZ

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
Guest
sumit sharma

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

Matt Wohler
Guest
Matt Wohler

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

trackback
jQuery Tutorials

[…] after() and insertAfter() example Add a text or html content after the matched elements with jQuery. […]