List of Elements

index.html

<div id="mainContainer">
	<div id="page" class="wrapper">
		<h2>List of Elements</h2>
		<div id="list"></div>
			<!--
			<ul>
			<li id="1">List Item 001</li>
			<li id="2">List Item 002
				<ul>
					<li id="1">List Item 001</li>
					<li id="2">List Item 002</li>
					<li id="3">List Item 003</li>
					<li id="4">List Item 004
						<ul>
							<li id="1">List Item 001</li>
							<li id="2">List Item 002</li>
							<li id="3">List Item 003</li>
							<li id="4">List Item 004</li>
							<li id="5">List Item 005</li>
							<li id="6">List Item 006
								<ul>
									<li id="1">List Item 001</li>
									<li id="2">List Item 002</li>
									<li id="3">List Item 003</li>
									<li id="4">List Item 004</li>
									<li id="5">List Item 005</li>
									<li id="6">List Item 006</li>
								</ul>
							</li>
						</ul>
					</li>
					<li id="5">List Item 005</li>
					<li id="6">List Item 006</li>
				</ul>
			</li>
			<li id="3">List Item 003</li>
			<li id="4">List Item 004</li>
			<li id="5">List Item 005</li>
			<li id="6">List Item 006</li>
		</ul>
		-->
	</div>
</div>

list-of-elements.markdown

List of Elements

A Pen by Steven Ventimiglia on CodePen.

License.

script.babel

const list = document.getElementById('list');

const elements = [
	div: {	
		id: null,
		class: {},
		props: {},
		data: {},
		content: '!!!' },
	span: {
		id: null,
		class: {},
		props: {},
		data: {},
		content: '!!!' },
	div: {
		id: null,
		class: {},
		props: {},
		data: {},
		content: '!!!' }
];

let tree = '';
for (let i=0; i < elements.length; i++) {
	tree += `<div>${elements[i].el}</div>`;
}

list.insertAdjacentHTML('beforeend', tree);

// list.insertAdjacentHTML('beforeend', JSON.stringify(elements));

style.scss

// Sass
$space: 20px;

@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/baseDark.css';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/icons.css';

// Pen
h2 {
	color: #ccc;
	font-size: 1.85em;
	padding-bottom: $space;
	margin-bottom: $space;
	border-bottom: 1px solid #777;
}
#page {
	display: block;
	position: relative;
	min-height: $space*20;
	padding: $space;
	margin: $space auto;
	border-radius: $space/4;
	box-shadow: 0 0 6px rgba(0,0,0,0.15);
	background: #444;
	overflow: hidden;
}

ul li > ul {
	margin: $space;
	margin-right: 0;
}

#list {
	font-size: 1.5em;
	line-height: 1.35em;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet" />