JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div>
	<div class="one">i am one</div>
	<div class="two">i am two</div>
	<div class="three">i am three</div>
	<div class="four">i am four</div>
</div>

<div id="landingpad">
</div>

CSS

.a {
	background: red;
}
.b {
	background: yellow;
}
.c {
	background: green;
}
.d {
	background: blue;
}

JavaScript

var trans = [
	['.one', '<h1 class="a"></h1>'],
	['.two', '<p class="b"></p>'],
	['.three', '<div class="c"></div>'],
	['.four', '<p class="d"></p>']
]

var barry = function( arr ) {
	var result = [];
	for (var i = 0; i < arr.length; i++) {
		var contents = $(arr[i][0]).contents();
		var nice = $(arr[i][1]).html(contents);
		result.push(nice);
	}
	$('#landingpad').append(result);
}


/*
var barry = function( trans ) {
	var result;
	for (var i = 0; i < trans.length; i++) {
		var el = $(trans[i][0]).contents()
				.clone()
				.wrap(trans[i][1]);
		$('body').append(el);
	}
}
*/

barry(trans)