javascript - element.className 对 html 没有影响

Question

我尝试动态添加类名，但没有任何反应，也没有收到任何错误

function    update(element,content,klass)   {   

    var p   =   element.firstChild  ||  document.createElement("p");    
    p.textContent   =   content;    

    if(klass)   {
    p.className = klass;
    console.log(p.className);
    }
    element.appendChild(p);
}

这是我调用更新函数的地方

function check(answer,index){
    if(answer === quiz.questions[index].answer){
        update($feedback,"Correct!","right");
        score++;
    }
    else{
        update($feedback,"Wrong!","wrong");
    }

}

console.log className 输出是正确的...“错误”和“正确”，不知道为什么我没有将类添加到我的段落中

Answer 1

您正在覆盖 setAttribute 方法而不是调用它，尽管设置属性更好。

p.className = klass;

<小时/>

此外，如果 .firstChild 是文本节点(可能只是空格)，则该类添加将不起作用。相反，请使用 .firstElementChild。

var p = element.firstElementChild || document.createElement("p"); 

<小时/>

此外，您应该知道，如果确实存在 .firstElementChild，则将其传递给 .appendChild 会将其重新定位到最后子节点的位置。如果您不希望这样做，那么您应该只在没有元素的情况下进行附加操作。

function update(element,content,klass) {   
    var p = element.firstElementChild || element.appendChild(document.createElement("p"));    
    p.textContent = content;    

    if(klass) {
        p.className = klass;
    }
}