jQuery after() and insertAfter() example

by HYEONGJINKIM

HTML

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

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;
}

JavaScript

//$(‘selector’).after(‘new content’);
$("#after").click(function() {
  $('.greyBox').after("<div class='redBox'>Iron man</div>");
});

//$(‘new content’).insertAfter(‘selector’);
$("#insertAfter").click(function() {
  $("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');
});

$("#reset").click(function() {
  location.reload();
});