如何在JavaScript的for循环遍历数组时添加HTML类

当然可以！你只需要在拼接HTML字符串的时候，直接在标签里加上class属性就行啦。这里有几种不同的实现方式，你可以根据需求选择：

方法1：直接给单个元素添加固定类名 #

这是最直接的方式，在生成<p>标签时，直接写入class属性：

var users = [{ name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ];
var div = "<div>";
for (var i = 0; i < users.length; i++) {
  // 给每个p标签添加对应的类
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

方法2：给每个用户项添加容器类（更语义化） #

如果希望每个用户的信息是一个独立的区块，可以把用户的所有内容包裹在一个带类的<div>里，这样后续样式控制更方便：

var users = [{ name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ];
var div = "<div>";
for (var i = 0; i < users.length; i++) {
  // 给每个用户项添加容器类
  div += "<div class='user-item'>";
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
  div += "</div>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

方法3：动态添加类（根据条件判断） #

如果需要根据数据条件来添加不同的类，比如给特定ID的用户添加高亮样式，可以用变量来动态拼接类名：

var users = [{ name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ];
var div = "<div>";
for (var i = 0; i < users.length; i++) {
  // 根据id判断是否添加高亮类
  var nameClass = users[i].id === "1" ? "user-name highlight" : "user-name";
  div += "<p class='" + nameClass + "'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

方法4：使用DOM API创建元素（更灵活） #

如果你的项目需要更复杂的交互，或者想避免字符串拼接的潜在问题，可以用原生DOM API来创建元素，然后通过classList.add()添加类：

var users = [{ name: "Jan", id: "1", number: "111-111-111" }, { name: "Juan", id: "2", number: "222-222-222" }, { name: "Margie", id: "3", number: "333-333-333" }, { name: "Sara", id: "4", number: "444-444-444" }, { name: "Tyrell", id: "5", number: "555-555-555" }, ];
var usersList = document.getElementById("usersList");

for (var i = 0; i < users.length; i++) {
  // 创建用户容器
  var userItem = document.createElement("div");
  userItem.classList.add("user-item");

  // 创建名称元素并添加类
  var nameEl = document.createElement("p");
  nameEl.classList.add("user-name");
  nameEl.textContent = users[i].name;
  userItem.appendChild(nameEl);

  // 创建ID元素并添加类
  var idEl = document.createElement("p");
  idEl.classList.add("user-id");
  idEl.textContent = users[i].id;
  userItem.appendChild(idEl);

  // 创建号码元素并添加类
  var numberEl = document.createElement("p");
  numberEl.classList.add("user-number");
  numberEl.textContent = users[i].number;
  userItem.appendChild(numberEl);

  // 将用户容器添加到列表中
  usersList.appendChild(userItem);
}

小提示 #

• 字符串拼接适合简单、快速的场景，代码量少易上手；
• DOM API方式更适合复杂交互场景，能更好地控制元素的生命周期和动态修改；
• 类名尽量使用语义化的命名（比如user-name而非name-p），方便后续维护。

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