首页 > 解决方案 > ForEach 不渲染多个图块

问题描述

如果有人能告诉我为什么该函数的行为与 HTML 代码在块中时的行为不同,我们将不胜感激!

标签: javascriptapifetch

解决方案


每次不更新 DOM 的速度要快得多,并且在更改渲染时不会冒此类拼写错误的风险

const render_office(entry) {
  return `<div class="column tile is-3 has-text-left">
        <article class='tile is-child box' style="height: 300px;">
        <p class="title">${entry.location}</p>
        <p><span class="has-text-weight-semibold">ID:</span> ${entry.id}</p>
        <p><span class="has-text-weight-semibold">Brand:</span> ${entry.brand}</p>
        <p><span class="has-text-weight-semibold">Location:</span> ${entry.location}</p>
        <p><span class="has-text-weight-semibold">City:</span> ${entry.city}</p>
        </article><div>`;
};

并使用

 office.innerHTML = data.map(entry => render_office(entry)).join("");

推荐阅读