我正在嘗試顯示影像串列，其標題存盤在關聯陣列中。但是代碼只顯示陣列中的最后一個影像和標題，在瀏覽器中不是全部。但是，當我控制臺記錄值時： value.title 和 value .image 完整串列顯示在控制臺中。我一定遺漏了一些簡單的東西，任何指標都會受到歡迎。
<center id="pics"></center>
<script>
const photos = [
{
title: "Landscape River",
image: "landscape1.png",
},
{
title: "Landscape Mountains",
image: "landscape2.png",
},
{
title: "Landscape Mountain Road",
image: "landscape3.png",
},
{
title: "Landscape Hills and Lake",
image: "landscape4.png",
},
];
photos.forEach((value) => {
console.log(value.title, value.image);
document.getElementById("pics").innerHTML =
`<img src="images/${value.image}" >` "<br>" value.title;
});
</script>
</body>
uj5u.com熱心網友回復：
你會想要做document.getElementById("pics").innerHTML =而不是僅僅=。您想附加每個標題和影像，如果有意義的話，不要每次都用新的標題/影像重置 innerHTML。快樂編碼！
uj5u.com熱心網友回復：
雖然公認的答案是可行的，但它不是一個好的解決方案，因為它會導致每次回圈迭代都完全不必要地重新渲染 DOM。這只是故事的性能方面；在安全方面使用innerHTML也很糟糕。
相反，使用 動態創建這些元素document.createElement，將其附加到 a documentFragment，當回圈完成時，append將該片段添加到實際的 DOM。
話雖這么說，這就是一個適當的解決方案的樣子：
const picsContainer = document.getElementById("pics");
const fragment = new DocumentFragment();
photos.forEach(({image, title}) => {
const img = document.createElement('img');
img.src = `images/${image}`;
const br = document.createElement('br');
const text = document.createTextNode(title);
fragment.append(img, br, text);
});
picsContainer.append(fragment);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438221.html
標籤：javascript html
上一篇：CSS-懸停時導航到下一個欄
下一篇：css依次排列兩個元素