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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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