Primeira coisa, aconselho que não use id
como identificador dentro de um template, lembre-se que você terá este conjunto de elementos clonados e não é interessante ter dois elementos com o mesmo id
na pagina, então utilize alguma outro valor, como uma class
ou um data-*
.
Abaixo segue uma alternativa usando a tag template:
var content = document.getElementById("content");
var tmplItem = document.getElementById("tmplItem");
//montando um array com 6 itens, no seu exemplo você irá receber ele da sua requisição AJAX.
var data = []
for (var indice = 1; indice <= 6; indice++) {
data.push({
titulo: "titulo 0" + indice,
descdescricao: "Descricao 0" + indice,
datedata: "Data 0" + indice
});
}
//populando conteudo.
data.forEach(function (dataItem, indice) {
//clonando conteudo do template.
var item = document.importNode(tmplItem.content, true);
//atualizando o novo item com os valores do dataItem atual.
item.querySelector(".tit").textContent = dataItem.titulo;
item.querySelector(".desc").textContent = dataItem.desc;descricao;
item.querySelector(".date").textContent = dataItem.date;data;
content.appendChild(item);
});
<div id="content">
</div>
<!-- o conteudo deste template será clonado pelo JavaScript -->
<template id="tmplItem">
<article class="underline">
<a href="incidente.html">
<img src="img/buraco.jpg" alt="Incidente" />
</a>
<h2>
<a href="basic_markup.html" class="tit"></a>
</h2>
<p class="desc"></p>
<div class="date"></div>
<img class="tick" alt="não resolvido" src="img/no-tick.png" />
<img class="apoio" alt="apoiar" src="img/apoio.png" />
</article>
</template>