如何用JavaScript/jQuery在HTML中添加带类与多属性的标签

当然可以实现，下面给你几种实用的方法，从基础到简便写法都有：

方法1：基础分步设置 #

逻辑清晰，适合逐个控制属性：

// 创建span元素
const mySpan = document.createElement('span');

// 设置ID
mySpan.id = 'target-span';

// 添加类（支持单个或多个类名）
mySpan.classList.add('text-primary', 'highlight');

// 添加多个data-*属性
mySpan.setAttribute('data-user-id', '123');
mySpan.setAttribute('data-role', 'admin');
mySpan.setAttribute('data-status', 'active');

// 将元素插入到页面（示例：插入到body末尾）
document.body.appendChild(mySpan);

方法2：用dataset简化data属性设置 #

dataset是元素内置属性，通过驼峰命名自动转换为短横线格式的data-*属性，比setAttribute更简洁：

const mySpan = document.createElement('span');

mySpan.id = 'target-span';
mySpan.classList.add('text-primary', 'highlight');

// 用dataset批量设置data属性
mySpan.dataset.userId = '123'; // 对应HTML里的data-user-id
mySpan.dataset.role = 'admin'; // 对应data-role
mySpan.dataset.status = 'active'; // 对应data-status

document.body.appendChild(mySpan);

方法3：批量赋值（最简便写法） #

用Object.assign一次性给元素设置所有属性，代码更紧凑：

const mySpan = Object.assign(document.createElement('span'), {
  id: 'target-span',
  className: 'text-primary highlight', // 注意这里用className，不是class
  dataset: {
    userId: '123',
    role: 'admin',
    status: 'active'
  }
});

// 插入到DOM
document.body.appendChild(mySpan);

注意点： #

• 若之前代码没生效，检查是否将创建的元素插入到了DOM中（比如未调用appendChild或insertBefore）；
• classList.add()可添加多个类，不会覆盖元素原有类（如果有的话），而className会直接替换类名，按需选择；
• dataset的驼峰命名会自动转换为HTML中的短横线格式，比如dataset.userName对应data-user-name。

内容的提问来源于stack exchange，提问作者Md. Ibrahim