Para contexto: mi aplicación tiene un programador y quiero mostrar múltiples bloques de citas (por ejemplo, un div como una imagen, texto y un botón para niños), pero esta pregunta también puede ser aplicable para, digamos, catálogos de productos. ¿Cuál es la mejor práctica para construir el contenido HTML para esos bloques?

En mi búsqueda encontré múltiples opciones, por ejemplo (con pseudocódigo)

Construir línea por línea en jQuery

 $('<div />').append($('<img />')).append($('<p />').append($('<button />'));

Personalmente, encontré que esta opción se vuelve bastante fea una vez que el bloque contiene más de 3 a 5 elementos, porque el código comenzó a abarcar más de una página completa de desplazamiento y se volvió ilegible (pero esto también podría deberse a mis malas habilidades de codificación).

Recuperar página HTML a través de Ajax/Load

 <div> <img><p></p><button></button> </div>

 $("target").load("page.php"); or $.ajax({ url: "page.php", success: function (response) { $("target").append(response); });

En el lado positivo, esto separa el contenido, lo que reduce el tiempo inicial de carga de la página y el contenido se puede crear en el lado del servidor justo antes de que sea necesario. devolución (prácticamente sin envío de datos de ida y vuelta). Aunque esto puede parecer insignificante al final, todos los pequeños retrasos se suman y pueden afectar la experiencia del usuario.

Clonar plantillas

 <template> <div> <img><p></p><button></button> </div> </template>

 const template = document.querySelector("template"); var tgt = document.getElementById("target"); node = document.importNode(template.content, true); tgt.appendChild(node);

En el lado positivo, esta opción es aproximadamente 10-20 veces más rápida que la primera opción (compilación a través de jQuery), pero eso solo se notará después de ~ 1000 bloques, lo que supera con creces mi caso de uso. En el lado negativo, esto 'contamina' el código HTML de la página y, de todos modos, se requiere el procesamiento del contenido en el objeto a través de JS.

¿Qué otras opciones viables existen? ¿Y cuál es la mejor práctica para este caso de uso?