点击搜索按钮后如何渲染大量的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

连接（推送到数组）HTML，以便您有一个更新可以使用innerHTML代替insertAdjacent来替换内容let html = [];data.data.hits.forEach(recipe => {&nbsp; html.push(`&nbsp; <div class="recipe-results__card">&nbsp; &nbsp; <div class="recipe-results--img-container">&nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; src="${recipe.image}"&nbsp; &nbsp; &nbsp; &nbsp; alt="${recipe.label}"&nbsp; &nbsp; &nbsp; &nbsp; class="recipe-results__img"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; &nbsp; <p class="recipe-results__categories">&nbsp; &nbsp; &nbsp; ${limitCategories}&nbsp; &nbsp; </p>&nbsp; &nbsp; <h2 class="recipe-results__name">&nbsp; &nbsp; &nbsp; ${recipe.label}&nbsp; &nbsp; </h2>&nbsp; </div>&nbsp; `) });document.getElementById("recipeGrid").innerHTML = html.join("");