如何解析‘未捕获的DOMException:无法在DOMTokenList上执行添加：

Question

我想创建媒体图标

    <div class="contact">
     <span>
      <i class="fa fa-phone"></i>
    </span>
    <span>
     <i class="fa fa-facebook"></i>
    </span>
    <span>
     <i class="fa fa-twitter"></i>
   </span>
   <span>
     <i class="fa fa-instagram"></i>
   </span>
   <span>
     <i class="fa fa-envelope"></i>
   </span>
   </div>

使用上面的代码可以很好地工作，使用JavaScript函数也可以完成同样的工作，但我得到了错误消息

**index.js:36未捕获DOMException:无法对“”DOMTokenList“”执行“”add“”：提供的标记(“”fa-facebook“”)包含HTML空格字符，这些字符在标记中无效。“”**

let socail = (cls,href) => {
    let sp =document.createElement('span');
    let i = document.createElement('i');
    let a = document.createElement('a');
    sp.prepend(i);
    i.prepend(a);
    i.classList.add(cls);
    a.setAttribute('href', href )
    navImg.insertAdjacentElement('beforeBegin', sp);
};
socail('fa fa-facebook', 'facebook.com');

我需要你的帮助。

Answer 1

类名不能包含空格。空格分隔多个类名。

您可以做的一件事是维护需要作为数组添加的多个类

const classesToAdd =['fa','fa-facebook']
socail(classesToAdd, 'facebook.com');

并遍历数组项并添加它们

sp.prepend(i);
i.prepend(a);
cls.forEach((ele) => {
    i.classList.add(...cls)
})

输出：

​