我正在構建一個菜譜搜索應用程序，但我不確定如何渲染代表我想要顯示的 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); };
1 回答
偶然的你
TA貢獻1841條經驗 獲得超3個贊
連接（推送到數組）HTML，以便您有一個更新
可以使用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("");
- 1 回答
- 0 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消