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

Question

我正在构建一个菜谱搜索应用程序，但我不确定如何渲染代表我想要显示的 30 个菜谱的大块 html。这些食谱卡显然必须根据我搜索的餐食类型进行更改。如何将 html 实现到我的 Js 中，以便我可以根据膳食类型更改它？我尝试使用 insertAdjecentHTML 来完成此操作，但因为它不会用菜谱替换旧页面，而是在其上替换广告。它不起作用：不过这里是代码：// recipe card markupconst 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 resexport const renderResults = recipes => {    recipes.forEach(renderRecipe);  };

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