jQuery insert functions

.append() .prepend() .before() .after() and their flipped versions .appendTo() .prependTo() .insertBefore() .insertAfter()

by Bob Stein

HTML

<script src="https://stackoverflow.com/a/27589573/673991"></script>
<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

CSS

body {
  padding:50px;   
}

.target {
  border:2px solid #bbb;
  background-color:#eee;
  padding:10px;
  margin:10px auto;
}

.child {
  display:block;
  width:99px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:DarkRed;
}

 .sibling {
  display:block;
  width:99px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:black;
}
.flipped {
  opacity: 0.50;
}

JavaScript

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');
    
$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);