element.className对html没有影响

Question

我尝试动态添加一个className没有任何反应，我没有错误

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);
}

这是我调用update func

的地方

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

}

console.log className输出正确...＆＃34;错误＆＃34;并且＆＃34;对＆＃34;，不知道为什么我没有把课程添加到我的段落

Answer 1

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

p.className = klass;

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

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

另外，您应该知道，如果确实存在.firstElementChild，则将其传递给.appendChild，将重新定位到 last <的位置< / em>孩子。如果你不想那样，那么你应该只在没有元素的情况下进行追加。

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

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

Answer 2

您必须调用setAttribute（在代码中也拼写错误）函数如下：

p.setAttribute("class", klass);