JavaScript遍历对象数组生成图片网格仅显示最后一项问题求助

问题根因 #

• 你将创建DOM元素的逻辑放在了for循环外部，全程只会生成1组div.featured-item、img、p标签，每次循环都是修改这组元素的属性、重复追加同一个DOM节点，而DOM节点在页面中只会存在一份，重复移动追加只会保留最后一次修改的结果，这是只显示最后一条数据的核心原因。
• 额外注意你代码里的图片路径写的是./inages/，如果你的实际图片存放文件夹命名为images，拼写错误也会导致图片加载失败。

修复后的代码 #

let featuredMomentsDiv = document.getElementById('featured-grid')
function CreateFeaturedGridItem(){
    // 创建元素的逻辑放到循环内部，每次遍历都生成新的元素组
    for(let i = 0; i < moments.length; i++){
        let newFeaturedDiv = document.createElement('div')
        let newFeaturedImage = document.createElement('img')
        let newFeaturedTitle = document.createElement('p')

        newFeaturedDiv.classList.add('featured-item')
        newFeaturedImage.classList.add('featured-image')
        newFeaturedTitle.classList.add('featured-title')

        let currentImage = moments[i]['image']
        let currentTitle = moments[i]['title']

        newFeaturedImage.src = currentImage
        newFeaturedTitle.innerHTML = currentTitle
        newFeaturedDiv.appendChild(newFeaturedImage)
        newFeaturedDiv.appendChild(newFeaturedTitle)

        featuredMomentsDiv.append(newFeaturedDiv)
    }
}
CreateFeaturedGridItem();

可选优化方案 #

如果想进一步简化代码，也可以用模板字符串拼接HTML的方式实现，写法更直观：

const featuredMomentsDiv = document.getElementById('featured-grid')
function CreateFeaturedGridItem(){
  featuredMomentsDiv.innerHTML = moments.map(item => `
    <div class="featured-item">
      <img class="featured-image" src="${item.image}" alt="${item.title}">
      <p class="featured-title">${item.title}</p>
    </div>
  `).join('')
}
CreateFeaturedGridItem()

内容的提问来源于stack exchange，提问作者omar jandali