javascript - 点击搜索按钮后如何渲染大量的html？

Question

我正在构建一个食谱搜索应用程序，但我不确定如何呈现代表我想要显示的 30 个食谱的大块 html。这些食谱卡显然必须根据我搜索的食物类型进行更改。如何将 html 实现到我的 Js 中，以便我可以根据餐食类型对其进行更改？

我试图用 insertAdjecentHTML 来做，但因为它不会用食谱替换旧页面，而是在上面放广告。它没有用：不过这里是代码：

// recipe card markup
const renderRecipe = () => {
  const markup = `
  <div class="recipe-results__card">
    <div class="recipe-results--img-container">
      <img
        src="${data.data.hits.recipe.image}"
        alt="${data.data.hits.recipe.label}"
        class="recipe-results__img"
      />
    </div>
    <p class="recipe-results__categories">
      ${limitCategories}
    </p>
    <h2 class="recipe-results__name">
      ${data.data.hits.recipe.label}
    </h2>
  </div>
  `;
  DOM.recipeGrid.insertAdjacentHTML("beforeend", markup);
};


// fn to display the markup for every search res
export const renderResults = recipes => {
    recipes.forEach(renderRecipe);
  };

标签： javascripthtml

Answer 1

1. 连接（推送到数组）HTML，以便您进行一次更新
2. 您可以使用 innerHTML 而不是 insertAdjacent 来替换内容

let html = [];
data.data.hits.forEach(recipe => {
  html.push(`
  <div class="recipe-results__card">
    <div class="recipe-results--img-container">
      <img
        src="${recipe.image}"
        alt="${recipe.label}"
        class="recipe-results__img"
      />
    </div>
    <p class="recipe-results__categories">
      ${limitCategories}
    </p>
    <h2 class="recipe-results__name">
      ${recipe.label}
    </h2>
  </div>
  `) });
document.getElementById("recipeGrid").innerHTML = html.join("");