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

Answer 1

1. 连接(推送到数组)HTML，这样您就可以进行一次更新
2. 可以使用innerHTML代替insert Adjacent来替换内容

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