Capítulo 2

Elemento template

JavaScript

<script>
var titulo = ['Livros do Maujor', 'Cores']
var livro = ['Web Design Responsivo', 'JavaScript', 'HTML5', 'CSS3']
var cor = ['Vermelha', 'Verde', 'Azul', 'Amarela']
var template = document.querySelector('.lista');
var clone = template.content.cloneNode(true); 
var tit = clone.querySelector('#tit'); 
var items = clone.querySelectorAll('li'); 
var botao = document.querySelectorAll('button');
for(var k=0; k<botao.length; k++) {
	botao[k].onclick = function() {
	if(this.id == 'livro') {
		var itemInserido = livro; 
		tit.textContent = titulo[0];
	}else{
		var itemInserido = cor;
		tit.textContent = titulo[1];
	}
		for(var i=0; i<itemInserido.length; i++) {
			items[i].textContent = itemInserido[i];
		}
   document.querySelector('.box').appendChild(clone);
	}
}
</script>

HTML

<body>
<template class="lista">
<style scoped>
ul {margin:0; padding:0; list-style:none;}
</style>    
    <h2 id="tit"></h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
		</ul>
</template>

<button id="livro">Mostrar livros</button>
<button id="cor">Mostrar cores</button>
<div class="box"></div>