JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div class='a'>A</div>
<div class='b'>B</div>
<div class='c'>C</div>
<div class='d'>D</div>

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

CSS

html { font-family:sans-serif; }
div {padding:3px;margin:3px;text-align:center;color:#fff;}

.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

$('#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()'));
});