如何使用JavaScript的For循环渲染电影列表并修复代码运行问题

核心问题 #

你的代码存在两个致命错误导致无法渲染10条电影列表：

• for循环内部直接写了return语句，函数在第一次遍历完第一条电影数据后就直接退出，剩余9条数据完全不会被处理
• 所有DOM操作都指向固定ID的节点，HTML页面中ID是全局唯一的，就算删掉return让循环跑完，你也只是在反复覆盖同一个节点的内容，最终页面只会显示最后一条电影的数据

修复步骤 #

首先调整你的HTML结构，预留列表容器，使用template标签定义单条电影的模板（避免重复写HTML代码）：

<!-- 电影列表的挂载容器 -->
<div id="movie-list"></div>

<!-- 单条电影卡片模板，默认不会在页面显示 -->
<template id="movie-card-template">
  <div class="movie-card">
    <img class="poster" alt="电影海报">
    <h3 class="title"></h3>
    <p class="genre"></p>
    <p class="rating-num"></p>
    <p class="movie-desc"></p>
    <a class="imdb-page" target="_blank">查看IMDb详情</a>
  </div>
</template>

然后修改你的JS代码如下：

function renderMovieList() {
  const listContainer = document.getElementById('movie-list')
  const cardTemplate = document.getElementById('movie-card-template')
  // 渲染前清空容器，避免重复渲染生成冗余节点
  listContainer.innerHTML = ''

  for (let i = 0; i < listMovies.length; i++) {
    const movieData = listMovies[i]
    // 克隆模板生成独立的单条电影节点
    const currentCard = cardTemplate.content.cloneNode(true)
    // 给当前电影节点填充数据，仅查找当前节点下的元素，不会全局覆盖
    currentCard.querySelector('.poster').src = movieData.img
    currentCard.querySelector('.title').textContent = movieData.name
    currentCard.querySelector('.genre').textContent = movieData.genre
    currentCard.querySelector('.rating-num').textContent = `Rating: ${movieData.rating}/10`
    currentCard.querySelector('.movie-desc').textContent = movieData.desc
    currentCard.querySelector('.imdb-page').href = movieData.link
    // 把当前电影卡片插入到列表容器
    listContainer.appendChild(currentCard)
  }
  // 若需要返回所有电影数据，将return放在循环外部即可
  return listMovies
}

补充说明 #

• 这里使用textContent代替innerHTML，可以避免恶意代码注入的XSS风险，如果你确定电影数据都是安全的可以换回innerHTML
• 如果你不想用template标签，也可以直接在循环内通过document.createElement逐个创建节点，或者拼接HTML字符串后一次性插入到列表容器，核心逻辑都是循环生成独立的节点再统一挂载，不要反复覆盖同一个ID的节点

内容的提问来源于stack exchange，提问作者Ghany At-Tirmidzi