append.js

// Estrutura

//	<li>
//		<div class="item-about">
//				<span class="item-headline">Lorem Ipsum</span>
//				<span class="item-additional"><b>Lorem:</b> Ipsum</span>
//				<span class="item-additional"><b>Lorem:</b> Ipsum</span>
//		</div>
//		<div class="item-additional">
//			<span class="sub-additional"><b>Lorem:</b> Ipsum</span>
//			<span class="sub-additional"><b>Lorem:</b> Ipsum</span>
//		</div>
//	</li>

// exemplo $
app.buildList = function(data) {
	var item,
	$list = $('.list'),
	$item,
	$about,
	$additional;

	$list.html(' ');
	
	for (var i = 0; i < data.length; i++) {
		item = data[i];
		$list.append('<li/>');
		$item = $list.find('li:last-child');

		$item.append('<div class="item-about" />');
		$item.append('<div class="item-additional" />');
		
		$about = $item.find('.item-about');
		$additional = $item.find('.item-additional');
		
		$about.append('<span class="item-headline">'+ item.headline +'</span>');
		$about.append('<span class="item-additional"><b>Lorem: </b>'+ item.additional +'</span>');
		$about.append('<span class="item-additional"><b>Lorem: </b>'+ item.additional +'</span>');
		
		$additional.append('<span class="item-additional"><b>Lorem: </b>'+ item.additional +'</span>');
		$additional.append('<span class="item-additional"><b>Lorem: </b>'+ item.additional +'</span>');
	};
}

// exemplo vanilla

app.createNode = function(element, attributes, childNode) {
	var element = document.createElement(element),
	props,
	i;

	if(typeof arguments[1] === 'object') {
		for(props in arguments[1]) {
			element.setAttribute(props, arguments[1][props]);
		}
	} else if(typeof arguments[1] != 'undefined') {
		if(typeof arguments[1] === 'string') {
			element.appendChild(document.createTextNode(arguments[1]));
		} else {
			for (i = 0; i < arguments[1].length; i++) {
				element.appendChild(app.createNode(arguments[1][i][0], arguments[1][i][1], arguments[1][i][2]));
			}
		}
	}
	if(childNode) {
		for (i = 0; i < childNode.length; i++) {
			if(typeof childNode[i] === 'string') {
				element.appendChild(document.createTextNode(childNode[i]));
			} else {
				element.appendChild(app.createNode(childNode[i][0], childNode[i][1], childNode[i][2]));
			}
		}	
	}
	return element;
};

app.buildList = function(data) {
	var item,
	list = document.querySelector('.list'),
	li,
	about,
	additional;

	for (var i = data.length - 1; i >= 0; i--) {
		item = data[i];
		list.appendChild(document.createElement('li'));
		li = list.querySelector('li:last-child');

		li.appendChild(app.createNode('span', {'class': 'item-about'}));
		li.appendChild(app.createNode('span', {'class': 'item-additional'}));

		about      = li.querySelector('.item-about');
		additional = li.querySelector('.item-additional');

		about.appendChild(app.createNode('span', {'class': 'item-headline'}, [item.headline]));
		about.appendChild(app.createNode('span', {'class': 'item-additional'}, [['b', 'Lorem: '], item.additional]));
		about.appendChild(app.createNode('span', {'class': 'item-additional'}, [['b', 'Lorem: '], item.additional]));

		additional.appendChild(app.createNode('span', {'class': 'item-additional'}, [['b', 'Lorem: '], item.additional]));
		additional.appendChild(app.createNode('span', {'class': 'item-additional'}, [['b', 'Lorem: '], item.additional]));
	};
}