如何用JSON数据遍历HTML中的div？能否用单个类遍历JSON的article[0]与article[1]？

1. 如何使用从JSON获取的不同值遍历HTML中的div元素 #

咱们先把场景落地：假设你已经拿到了目标JSON数据（不管是接口请求来的还是本地定义的），现在要把这些数据逐个渲染到HTML的div里。我给你一套完整的实现示例：

示例JSON数据 #

const articleData = {
  "articles": [
    {
      "title": "前端性能优化实用技巧",
      "desc": "从资源加载到代码逻辑的全方位优化指南"
    },
    {
      "title": "JavaScript异步编程核心解析",
      "desc": "Promise、async/await的底层逻辑与实战用法"
    }
  ]
};

对应HTML结构 #

先准备一个用来承载所有文章的父容器：

<div id="article-container"></div>

JavaScript遍历实现 #

接下来就可以遍历JSON里的articles数组，动态创建div并填充内容：

// 获取父容器节点
const container = document.getElementById('article-container');

// 遍历articles数组，逐个处理每篇文章数据
articleData.articles.forEach(article => {
  // 创建单个文章的div元素
  const articleDiv = document.createElement('div');
  // 给这个div加统一类名，方便后续样式控制
  articleDiv.classList.add('article-card');
  
  // 用模板字符串填充内容，写法简洁直观
  articleDiv.innerHTML = `
    <h3>${article.title}</h3>
    <p>${article.desc}</p>
  `;
  
  // 将创建好的文章div添加到父容器中
  container.appendChild(articleDiv);
});

执行这段代码后，JSON里的每一项数据都会被渲染成独立的div元素，自动完成遍历填充。

2. 能否使用单个类，将JSON文件中article[0]和article[1]的不同值填充到对应元素中完成遍历？ #

当然可以！不管你的HTML是提前写好的静态结构，还是动态生成的，都能用单个类实现数据填充，分两种场景说明：

场景1：HTML已有预定义的对应元素 #

比如你的HTML是这样的（两个文章项共用同一个.article-item类）：

<div class="article-item">
  <h3 class="article-title"></h3>
  <p class="article-desc"></p>
</div>
<div class="article-item">
  <h3 class="article-title"></h3>
  <p class="article-desc"></p>
</div>

对应的JavaScript代码可以这么写：

// 获取所有带.article-item类的DOM元素
const articleItems = document.querySelectorAll('.article-item');

// 遍历articles数组，同时通过索引对应到每个DOM元素
articleData.articles.forEach((article, index) => {
  // 定位当前文章项里的标题和描述元素
  const titleEl = articleItems[index].querySelector('.article-title');
  const descEl = articleItems[index].querySelector('.article-desc');
  
  // 把JSON数据填充到对应元素中
  titleEl.textContent = article.title;
  descEl.textContent = article.desc;
});

场景2：动态创建元素时使用单个类 #

其实就是第一个问题里的实现思路——给每个动态生成的div都加上同一个类（比如.article-card），这样既完成了遍历填充，又统一了元素的类标识，后续写样式也更方便。

核心逻辑就是：通过数组索引或者直接遍历，把JSON里的每一项数据和DOM元素一一对应，用类名来定位元素或者统一元素标识，完全不需要多个不同的类。

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