<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 parent = document.querySelector(<span class="-demo-string">'<input id=parent class=-demo-txt>'</span>);
parent.appendChild(child);</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-string:first-child > .-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 parent = _(_('#parent').value);
		if (parent === null) {
			label.textContent = ('\u2192 Parent does not exist');
			throw new Error('abort');
		}
	} catch (err) {
		if (err instanceof SyntaxError || err.code === 12) label.textContent = ('\u2192 Invalid parent selector');
		throw new Error('abort');
	}
	parent.appendChild(child);
	label.textContent = ('\u2713 Insertion complete');
}