Javascript document.getElementById（"；）.innerHTML输出字体颜色

我有一个代码，它循环遍历简单的数据值数组，并将它们打印出来，以便

<div id = "output"> Output Updates </div> 
<div id = "track"> Track </div> 
<div id = "results"> Results <br/></div>

输出更新
跟踪
结果

var output=document.getElementById（“输出”）；
var数据=[12,22,01,8,34]；
var-dataIndex=0；
变量计数器=0；//试验
无功电流=0；
var previous=数据[0]；
var output=document.getElementById（“输出”）；
setInterval（函数（）{
//output.innerHTML=data[dataIndex].x；
当前=数据[数据索引]；
output.innerHTML=当前；
如果（当前>上一个）{
document.getElementById（“结果”）.innerHTML+=+current+“
”；
}
else if（当前==上一个）{
document.getElementById（“结果”）.innerHTML+=+current+“
”；
}
否则{
document.getElementById（“结果”）.innerHTML+=+current+“
”；
}
先前=当前；
dataIndex=（dataIndex+1）%data.length；
}, 500)

我想做的是 如果是（当前>上一个）条件，则以绿色字体打印结果 否则，如果出现（当前==上一个）条件，则以黑色字体打印结果 else条件，然后以红色字体打印结果

当我为每个条件设置字体颜色样式时，它会更改已打印的每个结果的字体颜色

---

下面是一个JSFIDLE链接

元素的直接文本节点只能有一种颜色，但其子节点可以有不同的颜色

每次更新

结果时，添加具有所需颜色的
div
：

if (current > previous) {
  color= 'green';
}
else if (current == previous) {
  color= 'black';
}
else {
  color= 'red';
}

document.getElementById("results").innerHTML += 
  '<div style="color: '+color+'">' +current + " </div>";

if（当前>上一个）{
颜色='绿色'；
}
else if（当前==上一个）{
颜色='黑色'；
}
否则{
颜色=红色；
}
document.getElementById（“结果”）.innerHTML+=
''+电流+''；


if (current > previous) {
  color= 'green';
}
else if (current == previous) {
  color= 'black';
}
else {
  color= 'red';
}

document.getElementById("results").innerHTML += 
  '<div style="color: '+color+'">' +current + " </div>";