Quiero agregar un elemento de lista complejo (una tarjeta con una imagen, encabezado, fondo, etc.) para cada elemento de una matriz. Hasta ahora creé una plantilla .php para los elementos de la lista.

Esta plantilla está incluida en mi html con la función de inclusión de php

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

y multiplicado así

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

Recorro mi matriz e incluyo un nuevo elemento de lista para cada entrada de matriz que funciona bien.

El problema que tengo es que esto también incluye la plantilla vacía al principio.

Así que tengo dos preguntas. En primer lugar, ¿es este el intento correcto de agregar dinámicamente elementos de matriz? Y si es así. ¿Cómo no incluyo la plantilla php vacía?

Muchas gracias.