Add complexe Javascript array elements to HTML

I want to add a complexe list item (a card with a picture, header, background etc.) for each element of an array. So far I created a .php template for the list elements.

This template is included in my html with the php include function

<ul id="kuchenListe">
    <?php include("cakeCard.php"); ?>                   
</ul>

and multiplied like this

function fillCakeList() {
    if (allCakes.length != 0) {
        var docFrag = document.createDocumentFragment();
        for (var i = 0; i < allCakes.length; i++) {
            var tempNode = document.querySelector("li[data-type='template']").cloneNode(true); 
            tempNode.querySelector("p.kuchenName").textContent = allCakes[i];

            docFrag.appendChild(tempNode);

        }
        kuchenListe.appendChild(docFrag);
        delete docFrag;
    }
}

I iterate through my array and include a new list element for each array entry which works fine.

The problem I am having is that this also includes the empty template in the beginning.

So I have two questions. First of all is this the right attempt at all to dynamically add array elements? And if yes. How do I not include the empty php template?

Thanks a lot.