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:

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    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, 
        desc: "Descricao 0" + indice, 
        date: "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;
      item.querySelector(".date").textContent = dataItem.date;
      content.appendChild(item);
    });

<!-- language: lang-html -->

    <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>

<!-- end snippet -->