动态创建多个 HTML 块的最佳实践 [已关闭]

问：

对于上下文：我的应用程序有一个调度程序，我想显示多个约会块（比如说一个 div 作为子项、一个图像、文本和一个按钮），但这个问题也适用于产品目录。为这些块构建 HTML 内容的最佳实践是什么？

在我的搜索中，我找到了多个选项，例如（带有伪代码）

在jQuery中逐行构建

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

就我个人而言，我发现一旦块包含超过 3-5 个元素，这个选项就会变得非常丑陋，因为代码开始跨越超过一整页的滚动并且变得不可读（但这也可能是因为我的编码技能很差）。

通过 Ajax/Load 检索 HTML 页面

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

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

从好的方面来说，这分离了内容，从而减少了初始页面加载时间，并且可以在需要之前在服务器端构建内容，不利的一面是，我的服务器显示 AJAX 调用返回的延迟为 ~0.1s（平均而言，可重现）（几乎没有来回发送数据）。虽然这最终可能看起来微不足道，但所有小的延迟加起来都会影响用户体验。

克隆模板

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

从好的方面来说，这个选项比第一个选项（通过 jQuery 构建）快大约 10-20 倍，但这只有在 ~1000 个块之后才会变得明显，这远远超出了我的用例。不利的一面是，这会“污染”页面 HTML 代码，并且无论如何都需要通过 JS 将内容处理到对象中。

还有哪些其他可行的选择？此用例的最佳实践是什么？