For context: My application has a scheduler and I want to display multiple appointment blocks (say a div as childs an image, text and a button), but this question can also be applicable for let's say product catalogs. What is the best practice for building the HTML content for those blocks?

In my search I found multiple options, for example (with pseudo code)

Build line by line in jQuery

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

Personally I found this option to become quite ugly once the block contains more than 3-5 elements, because the code started to span more than a full page of scrolling and became unreadable (but this could also be because of my poor coding skills).

Retrieve HTML page via Ajax/Load

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

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

On the plus side this separates the content which reduces initial page loading time and the content can be built server side right before it is required, on the downside my server shows a delay of ~0.1s (on average, reproducable) for AJAX calls to return (with practically no data sent back and forth). Although this might seem insignificant in the end all small delays add up and can impact user experience.

Clone templates

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

On the plus side this option is about 10-20x faster than the 1st option (build via jQuery), but that will only become noticable after ~1000 blocks which far exceeds my use case. On the down side this 'pollutes' the page HTML code and processing of the content into the object is required through JS anyways.

Which other viable options are out there? And what is the best practice for this use case?