Podemos utilizar template literals para criar um template HTML de forma mais fácil e legível. Podemos criar uma string contendo o template e inserir as variáveis utilizando a sintaxe ${}. Exemplo de código utilizando template literals:
function criarCard(cliente) {
return <div class="card">
<h2>${cliente.nome}</h2>
<p>${cliente.email}</p>
<p>${cliente.telefone}</p>
</div>;
}
const clientes = [ { nome: 'João', email: 'joao@example.com', telefone: '(11) 1234-5678' }, { nome: 'Maria', email: 'maria@example.com', telefone: '(11) 9876-5432' }, { nome: 'José', email: 'jose@example.com', telefone: '(11) 5555-5555' } ];
const cards = clientes.map((cliente) => criarCard(cliente)); const html = cards.join('');
document.getElementById('cards-container').innerHTML = html;
Neste exemplo, utilizamos a função criarCard para criar um card HTML para cada cliente da lista. Em seguida, utilizamos o método map para criar um array com todos os cards e, por fim, utilizamos o método join para juntar todos os cards em uma única string. Por fim, inserimos a string resultante no elemento HTML com o id cards-container utilizando a propriedade innerHTML.
Espero poder ter ajudado a galera....
