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>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials