如何使用JavaScript将数组元素循环渲染到指定HTML结构中

原生JavaScript实现（无框架依赖，通用场景） #

1. 改造原有HTML结构 #

删掉你标注的重复示例行即可，无需额外修改结构：

<div class="limiter">
  <div class="container-table100">
    <div class="wrap-table100">
      <div class="table">
        <div class="row header">
          <div class="cell">Rank</div>
          <div class="cell">Name</div>
          <div class="cell">Quiz Name</div>
          <div class="cell">Scores</div>
        </div>
        <!-- 动态生成的行将插入到这里 -->
      </div>
    </div>
  </div>
</div>

2. 编写JS渲染逻辑 #

直接在页面底部加入这段JS代码即可，我默认你示例中的测验名、分数为固定值，如需动态修改可以自行调整对应字段的取值逻辑：

// 这里替换为你从后端拿到的姓名数组
const nameList = ['amit','mayank','jatin', /* 剩下的7个姓名 */];
// 选中表格父容器
const tableContainer = document.querySelector('.table');
// 存储所有生成的行HTML
let rowHtml = '';

// 遍历数组生成每一行
nameList.forEach((name, index) => {
  rowHtml += `
  <div class="row">
    <div class="cell" data-title="Full Name">
      ${index + 1}
    </div>
    <div class="cell" data-title="Age">
      ${name}
    </div>
    <div class="cell" data-title="Job Title">
      Python Quiz
    </div>
    <div class="cell" data-title="Location">
      100
    </div>
  </div>
  `
})

// 将生成的HTML插入到表格中
tableContainer.insertAdjacentHTML('beforeend', rowHtml);

逻辑说明 #

• 排名直接取数组索引+1，自动从1开始递增
• 如果后端返回的是包含姓名、测验名、分数的对象数组，格式为const list = [{name: 'amit', quiz: 'Python Quiz', score: 100}, ...]，只需要把遍历里的对应字段替换为${item.quiz}、${item.score}即可
• 用insertAdjacentHTML插入性能优于直接修改innerHTML，不会覆盖原有表头内容

常用框架实现参考 #

Vue 3 模板写法 #

<template>
<!-- 其他原有结构省略 -->
<div class="table">
  <div class="row header">
    <div class="cell">Rank</div>
    <div class="cell">Name</div>
    <div class="cell">Quiz Name</div>
    <div class="cell">Scores</div>
  </div>
  <div class="row" v-for="(name, index) in nameList" :key="index">
    <div class="cell" data-title="Full Name">{{ index + 1 }}</div>
    <div class="cell" data-title="Age">{{ name }}</div>
    <div class="cell" data-title="Job Title">Python Quiz</div>
    <div class="cell" data-title="Location">100</div>
  </div>
</div>
</template>

React JSX写法 #

// 其他逻辑省略
return (
  {/* 其他原有结构省略 */}
  <div className="table">
    <div className="row header">
      <div className="cell">Rank</div>
      <div className="cell">Name</div>
      <div className="cell">Quiz Name</div>
      <div className="cell">Scores</div>
    </div>
    {nameList.map((name, index) => (
      <div className="row" key={index}>
        <div className="cell" data-title="Full Name">{index + 1}</div>
        <div className="cell" data-title="Age">{name}</div>
        <div className="cell" data-title="Job Title">Python Quiz</div>
        <div className="cell" data-title="Location">100</div>
      </div>
    ))}
  </div>
)

内容的提问来源于stack exchange，提问作者Deepak Lohmod