如何为document.createElement创建的DOM元素添加id或classname？

我是JavaScript新手，目前正通过for循环和JSON数据拉取练习相关知识。现有代码通过document.createElement创建DOM元素，想了解是否可以为这些元素添加id或classname（例如用于添加自定义图标或按钮），除了直接编写HTML外是否有可行方法，以下是我的代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Document</title>
</head>
<body>
    <section>
    </section>
    <script src="./app.js"></script>
</body>
</html>

JavaScript代码 #

const allCustomers = document.querySelector("section");

let custName = "";
let username = "";
let email = "";
let id = "";

const requestURL = "https://jsonplaceholder.typicode.com/users";

fetch(requestURL)
  .then((response) => response.text())
  .then((text) => DisplayUserInfo(text));

function DisplayUserInfo(userData) {
  const userArray = JSON.parse(userData);

  for (i = 0; i < userArray.length; i++) {
    let listContainer = document.createElement("div");
    let myList = document.createElement("p");
    let myListItems = document.createElement("span");
    myList.textContent = `Customer : ${userArray[i].name}`;
    myListItems.innerHTML =`<br>ID: ${userArray[i].id} <br>Email: ${userArray[i].email} <br>Username: ${userArray[i].username}`; 
    myListItems.appendChild(myList);
    listContainer.appendChild(myListItems);
    allCustomers.appendChild(listContainer);
  }
}

DisplayUserInfo();

给动态创建元素添加id/class的方法 #

完全可以给document.createElement生成的元素添加id和class，以下是几种实用方法：

1. 直接赋值属性 #

创建元素后，直接通过id和className属性设置：

// 给容器div添加class
listContainer.className = "customer-card";
// 给用户名称标签添加唯一id（用用户id保证不重复）
myList.id = `customer-name-${userArray[i].id}`;

2. 使用classList（灵活管理多个class） #

如果需要添加多个class，或者后续要动态增删class，推荐用classList：

listContainer.classList.add("customer-card", "card-shadow");
// 移除class：listContainer.classList.remove("card-shadow");

3. 通过setAttribute设置 #

也可以用setAttribute方法统一设置属性：

myListItems.setAttribute("class", "customer-details");
listContainer.setAttribute("id", `customer-container-${userArray[i].id}`);

代码优化建议 #

除了id/class的添加方法，你的代码还有几个可以改进的点：

1. 避免全局变量污染：for循环里的i没有用let声明，会变成全局变量，改成for (let i = 0; ...)即可。

2. 简化JSON解析：fetch可以直接用response.json()代替response.text()再手动JSON.parse，更简洁：

fetch(requestURL)
  .then((response) => response.json())
  .then((userArray) => DisplayUserInfo(userArray));

// 对应修改函数，直接接收解析好的数组
function DisplayUserInfo(userArray) {
  // 原逻辑保留，无需再JSON.parse
}

3. 删除冗余变量：开头声明的custName、username、email、id没有被使用，直接删除即可。

4. 修正DOM嵌套规范：当前代码把块级元素<p>嵌套在行内元素<span>里，不符合HTML规范，建议把myListItems改成<div>，或者调整元素嵌套顺序。

5. 避免innerHTML安全风险：如果后续数据包含用户输入内容，innerHTML可能引入XSS风险，建议用textContent结合创建元素的方式拼接内容：

// 替换原myListItems.innerHTML的写法
const idEl = document.createElement("div");
idEl.textContent = `ID: ${userArray[i].id}`;
const emailEl = document.createElement("div");
emailEl.textContent = `Email: ${userArray[i].email}`;
const usernameEl = document.createElement("div");
usernameEl.textContent = `Username: ${userArray[i].username}`;

myListItems.appendChild(idEl);
myListItems.appendChild(emailEl);
myListItems.appendChild(usernameEl);

修改后的示例代码 #

const allCustomers = document.querySelector("section");
const requestURL = "https://jsonplaceholder.typicode.com/users";

fetch(requestURL)
  .then((response) => response.json())
  .then((userArray) => DisplayUserInfo(userArray));

function DisplayUserInfo(userArray) {
  for (let i = 0; i < userArray.length; i++) {
    const user = userArray[i];
    
    let listContainer = document.createElement("div");
    listContainer.className = "customer-card";
    listContainer.id = `customer-${user.id}`;

    let customerName = document.createElement("h3");
    customerName.textContent = `Customer : ${user.name}`;
    customerName.className = "customer-name";

    let detailsContainer = document.createElement("div");
    detailsContainer.className = "customer-details";

    const idEl = document.createElement("p");
    idEl.textContent = `ID: ${user.id}`;
    const emailEl = document.createElement("p");
    emailEl.textContent = `Email: ${user.email}`;
    const usernameEl = document.createElement("p");
    usernameEl.textContent = `Username: ${user.username}`;

    detailsContainer.appendChild(idEl);
    detailsContainer.appendChild(emailEl);
    detailsContainer.appendChild(usernameEl);

    listContainer.appendChild(customerName);
    listContainer.appendChild(detailsContainer);
    allCustomers.appendChild(listContainer);
  }
}

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