After, Before, Append, AppendTo

by Paul Leech

HTML

<div class='a'>A</div>
<div class='b'>B</div>
<div class='c'>C</div>
<div class='d'>D</div>
<br /><br />
<button id="CafterA">C after A</button>
<button id="AafterD">A after D</button>
<button id="AappendD">A append D</button>
<button id="BappendToC">B appendTo C</button>
<button id="reset">Reset</button>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

CSS

html { font-family:sans-serif; }
body { margin:0 auto;width:100;text-align:center; }
div {padding:3px;margin:3px;text-align:center;color:#fff;}
button { padding:5px;margin:5px;border-radius:5px;}
.a{border:solid 1px red;background:red;}
.b{border:solid 1px blue;background:blue;}
.c{border:solid 1px green;background:green}
.d{border:solid 1px maroon;background:maroon;}

JavaScript

$(function(){
  $('#CafterA').click(function(){
    $('.a').after($('.c').text('C is placed with .after()'));
  });
  $('#AafterD').click(function(){
    $('.d').after($('.a').text('A is placed with .after()'));
  });
  $('#AappendD').click(function(){
    $('.d').append($('.a').text('A is placed with .append()'));
  });
  $('#BappendToC').click(function(){
    $('.c').appendTo($('.b').text('B is placed with .appendTo()'));
  });
});