通过js从JSON生成动态HTML-HTML字符串与单独的DOM元素创建?

抱歉,最初在这个意义上提出的问题不够精确,因此我现在试图更好地遵循指导原则,并提供更清晰的背景和目的。

据我所知,在js中写出整个HTML字符串( A. ):

const markup = "<div><p>Generated Markup</p></div>";

document.getElementById("target-element").innerHTML = markup;

这是最好的方式,因为这只会触发浏览器中的一次重新绘制,而不是使用类似( B ):

const container =  document.createElement('div');
const pelem = document.createElement('p');
const t = document.createTextNode('Generated Markup');
pelem.appendChild(t);
container.appendChild(pelem);
document.getElementById("target-element").innerHTML = container;

A.

为了给你更多关于上下文的信息,它可以与下面的用例进行比较。假设页面主体的标记类似于:

<header></header>
<main>
<p>Welcome, User!</p>
<div id="your-menus"></div>
<button>Get my favourite menus</button>
</main>
<footer></footer>

Get my favourite menus 按钮,则会触发对服务器的请求,返回如下内容 JSON

{
  "result" : "success",
  "menus" : [
    {
      "id" : "1",
      "title" : "Spaghetti",
      "description" : "Mamma Mia!",
    },
    {
      "id" : "47",
      "title" : "Burger & Fries",
      "description" : "Oh Lord!",
    }
  ]
}

然后,您要做的是填充 <div id="your-menus"></div> 对于每个检索到的产品,使用类似(花括号来说明要添加的标记中变量的位置)的内容:

<div class="fav-menu">
<h3>{{ title }}</h3>
<p>{{ description }}</p>
<button data-order-id="{{ id }}">Order</button>
</div>

把你所有的 fav-menu

<div id="fav-menu-wrapper">
<h2>Your current favourites are:</h2>
{{ fav-menu-divs }}
</div>

同样,在这种情况下,我的想象是,实现这一点最有效的方法是:

2. 遍历对象属性
3. fav菜单 通过简单字符串连接在该循环中的div
5. 将生成的HTML字符串插入为 innerHTML 进入目标元素。

B ,甚至是另一种方法?

请注意,一些用例与本例非常基本,其他用例可能需要组合包装容器,如本例中所述,以及使用JSON响应中的数据的5个不同重复标记组件,例如 组件,例如用于保留给定菜单的另一个组件,使用更大JSON响应的其他键,等等。

更新

this 现在,这是否表现得更快?