如何为元素添加Bootstrap类？解决DOMTokenList调用add方法报错问题

嘿，这个错误我之前也碰到过！问题出在你给classList.add()传的参数上——你肯定是把两个类名用空格连在一起传了，比如div.classList.add('si col-md-4')对吧？

classList.add()的规则很明确：每个参数必须是单个不含空格的CSS类名，空格是类名的分隔符，不能出现在单个token里，这就是为什么你会触发那个DOMException。

给你两种简单的解决办法： #

1. 把多个类名分开作为参数传递

classList.add()本身就支持一次传多个类名，每个类名单独写，用逗号隔开就行：

var row = document.getElementById('row1');
var div = document.createElement('div');
// 把'si'和'col-md-4'分成两个参数
div.classList.add('si', 'col-md-4');
row.appendChild(div);

2. 直接用className属性赋值

如果是一次性给元素设置多个类，也可以直接用className，这里允许带空格（毕竟它本来就是处理完整类名字符串的）：

var row = document.getElementById('row1');
var div = document.createElement('div');
div.className = 'si col-md-4';
row.appendChild(div);

额外提个醒： #

• classList的add/remove/toggle这些方法，都是针对单个类名操作的，所以千万别把多个类揉成一个字符串传进去；
• 如果你的类名是存在数组里的，还可以用扩展运算符：div.classList.add(...['si', 'col-md-4'])，非常方便；
• 对比下来，classList适合单独增删某个类而不影响其他类，className适合一次性覆盖或设置所有类，按需选就行~

内容的提问来源于stack exchange，提问作者Nick.K