如何在JavaScript函数中添加HTML类，为新增用户元素设置与现有元素一致的样式

你现在新增的用户元素没有应用现有样式，核心原因是你动态创建的div没有绑定对应样式类名，且内容拼接结构和现有展示元素的结构不匹配，按以下方式修改即可：

1. 先在你的style.css文件中定义好用户展示项的样式类，比如类名为user-item，样式规则和你页面中现有同类展示元素的样式保持完全一致即可。如果你的现有样式是拆分了姓名、ID、手机号三个字段的独立样式，也可以同步定义user-name、user-id、user-number三个子字段的类样式。
2. 修改你的addUser函数，调整动态创建元素的逻辑，给元素绑定对应的类名，代码修改参考如下：

function addUser() {
  // 分别获取三个输入框的取值，方便拆分展示
  const name = document.getElementById("name").value;
  const userId = document.getElementById("id").value;
  const phone = document.getElementById("number").value;

  // 创建用户项容器，绑定样式类
  const userItem = document.createElement("div");
  userItem.classList.add("user-item");

  // 按你页面现有展示结构拼接内容，也可以用createElement逐个创建子元素更可控
  userItem.innerHTML = `
    <span class="user-name">${name}</span>
    <span class="user-id">${userId}</span>
    <span class="user-number">${phone}</span>
  `;

  // 插入到用户列表容器中
  document.getElementById("usersList").appendChild(userItem);

  // 可选：添加完成后清空输入框，优化使用体验
  document.getElementById("name").value = "";
  document.getElementById("id").value = "";
  document.getElementById("number").value = "";
}

补充说明：你原代码中addUser函数定义的list参数属于冗余参数，你在函数内部重新声明了同名变量，调用时也没有传参，直接删除即可。

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