CSS - 如何将使用 "innerHTML" 编写的字符串的颜色设置为 div

Question

我目前有一个函数，可以将字符串数组输出到html页面中。如何设置输出文本的颜色？这是写入页面的代码：

function showErrors() {
    if (errList.length >= 1)
    document.getElementById("errorsSpace").innerHTML = errList.join('<br/>');
}

我试过用"颜色：红色"，但没有成功。我收到一个错误，上面写着"无法将属性'innerHTML'设置为null"

以下是代码其余部分的jsfiddle：https://jsfiddle.net/wd6fpgm6/

Answer 1

尝试以下操作-将数组转换为一个包含html和CSS中样式的错误类的字符串-然后将整个字符串插入hhtml并具有正确的结构和样式：

//CSS
.error{color:red}
//js
function showErrors() {
    var errors ="";
    if (errList.length >= 1)
      {
        for(i=0;i<errList.length;i++){
         errors+="<p class='error'>" + errList[i] + "</p>;";
          }
        document.getElementById("errorsSpace").innerHTML = errors;
      }
}
//result will be 
<div id='errorsSpace'>
    <p class='error'>Error 1</p>;
    <p class='error'>Error 2</p>;
    <p class='error'>Error 3</p>;
</div>

你甚至可以省略p上的class="error"，并将css设置为：

#errorsSpace p{color:red}

Answer 2

您尝试过这些方法吗？

document.getElementById("errorsSpace").setAttribute("style", "color:red");

或

document.getElementById("errorsSpace").style.color = "red";

Answer 3

您可以将每个错误放在段落标记中，只需设置标记的颜色，而不是在每个错误后放置
标记。