<div id=-demo-wrapper>
	<h2>
		Type in the id selectors of alphabets <br />
		<small>(for ex. <code>#a</code>, <code>#b</code>, or  <code>#c</code>)</small>
	</h2>
	<pre>var child = document.querySelector(<span class="-demo-string">'<input id=child class=-demo-txt>'</span>);
var refChild = document.querySelector(<span class="-demo-string">'<input id=refChild class=-demo-txt>'</span>);
var parent = refChild.parentNode;
parent.insertBefore(child, refChild); </pre>
	<br>
	<button class=-demo-btn>Insert</button> <label></label>
	<br><br />
	<div id="parentWrapper">
		<div id=parent-one class=parent>
			<h4>#parent-one</h4>
			<div id=a class="child pink">A</div>
			<div id=b class="child pink">B</div>
			<div id=c class="child pink">C</div>
			<div id=d class="child pink">D</div>
			<div id=e class="child pink">E</div>
			<div id=f class="child pink">F</div>
		</div>
		<div id=parent-two class=parent>
			<h4>#parent-two</h4>
			<div id=g class="child blue">G</div>
			<div id=h class="child blue">H</div>
			<div id=i class="child blue">I</div>
			<div id=j class="child blue">J</div>
			<div id=k class="child blue">K</div>
			<div id=l class="child blue">L</div>
		</div>
		<div id=parent-three class=parent>
			<h4>#parent-three</h4>
			<div id=m class="child green">M</div>
			<div id=n class="child green">N</div>
			<div id=o class="child green">O</div>
			<div id=p class="child green">P</div>
			<div id=q class="child green">Q</div>
			<div id=r class="child green">R</div>
		</div>
	</div>
</div>

 #parentWrapper {
 	text-align: center;
 }
 
 .parent {
 	width: 105px;
 	height: 460px;
 	display: inline-block;
 	overflow: hidden;
 	border-left: 1px dashed lightgrey;
 	padding: 10px;
 }
 
 #parent-three {
 	border-right: 1px dashed lightgrey;
 }
 
 .child {
 	width: 30px;
 	height: 30px;
 	background-color: yellow;
 	border-radius: 50%;
 	box-shadow: 0 0 2px grey;
 	margin: 10px;
 	float: left;
 	text-align: center;
 	line-height: 30px;
 }
 
 .child.pink {
 	background-color: hotpink;
 }
 
 .child.blue {
 	background-color: aqua;
 }
 
 .child.green {
 	background-color: lime;
 }
 /* styles for demo */
 
 #-demo-wrapper {
 	padding-top: 36px;
 }
 
 .-demo-string {
 	color: #48B492;
 	font-family: courier;
 }
 
 .-demo-txt {
 	border: 0;
 	outline: 0;
 	border-bottom: 1px dotted lightgrey;
 	font-size: 1em;
 	width: 125px;
 	color: #48B492;
 	font-family: courier;
 }
 
 .-demo-btn {
 	background-color: #F7E00E;
 	border: 0;
 	outline: 0;
 	padding: 3px;
 	border-radius: 2px;
 	cursor: pointer;
 }
 
 pre {
 	text-align: left;
 	font-size: 11pt;
 	width: 370px;
 	margin: auto;
 }
 
 pre .-demo-txt {
 	width: 20px;
 }
 
 body {
 	font-family: Crimson Text;
 	font-size: 13pt;
 	text-align: center;
 	margin: 0;
 }

var _ = document.querySelector.bind(document),
	label = _('label');
_('button').onclick = () => {
	try {
		var child = _(_('#child').value);
		if (child === null) {
			label.textContent = '\u2192 Child does not exist';
			throw new Error('abort');
		}
	} catch (err) {
		if (err instanceof SyntaxError || err.code === 12) label.textContent = '\u2192 Invalid child selector';
		throw new Error('abort');
	}
	try {
		var refChild = _(_('#refChild').value);
		if (refChild === null) {

			label.textContent = '\u2192 Reference child does not exist';
			throw new Error('abort');
		}
	} catch (err) {
		if (err instanceof SyntaxError || err.code === 12) label.textContent = '\u2192 Invalid reference child selector';
		throw new Error('abort');
	}
	var parent = refChild.parentNode;
	if (parent === null || parent.className !== 'parent') {
		label.textContent = '\u2192 Parent does not exist';
		throw new Error('abort');
	}

	parent.insertBefore(child, _(_('#refChild').value));
	label.textContent = '\u2713 Insertion complete';
}