调用DOMTokenList的add方法报DOMException如何解决？JS生成社交图标

报错触发核心原因 #

你遇到的DOMTokenList.add 报错，本质是API使用规则不匹配：
DOMTokenList（也就是classList返回的对象）的add方法，要求传入的每一个类名token都不能包含空格，它不支持单次传入带空格的复合类名字符串——你直接把'fa fa-facebook'整串塞给add方法，就会因为token里有空格直接抛出校验异常。

现有代码的其他隐性问题 #

除了类名添加的报错，你的代码还有两个和预期效果不匹配的逻辑问题：

• 节点嵌套顺序颠倒：原静态HTML结构是span > i，带跳转的常规社交图标结构应该是span > a > i，你之前写的是span > i > a，把链接标签塞到了图标标签内部，结构不符合DOM规范
• 链接格式不规范：直接传'facebook.com'会被浏览器识别为站点内的相对路径跳转，缺少协议前缀

修复方案 #

1. 把传入的复合类名字符串按空格拆分成独立类名数组，通过展开运算符传给classList.add，符合API的token校验要求
2. 调整节点嵌套顺序，匹配原静态HTML的渲染结构
3. 修正链接属性的拼接逻辑

修复后可正常运行的代码 #

// 函数名修正为规范拼写
const socialIcon = (cls, link) => {
    const span = document.createElement('span');
    const a = document.createElement('a');
    const i = document.createElement('i');

    // 核心修复：拆分带空格的类名字符串，拆分为独立类名参数传入
    i.classList.add(...cls.split(' '));

    // 设置链接属性
    a.setAttribute('href', link);
    a.setAttribute('target', '_blank');

    // 按正确嵌套顺序组装节点
    a.appendChild(i);
    span.appendChild(a);

    // 插入到目标位置
    navImg.insertAdjacentElement('beforeBegin', span);
}

// 调用方式和你之前保持一致
socialIcon('fa fa-facebook', 'https://facebook.com');

修复逻辑说明：classList.add本身支持接收多个独立的类名参数，比如i.classList.add('fa', 'fa-facebook')是完全合法的。我们通过split(' ')把传入的'fa fa-facebook'拆成两个独立的无空格类名，再用展开运算符传入方法，就完全规避了单token带空格的校验错误。

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