Javascript 字体图标不会附加在工具提示之前

我用一些简单的HTML和非常简单的JS创建了一个风险矩阵。工具提示中有三种不同的类别可以发布项目，即红色、黄色或绿色。这些都与发布的每个项目的严重性（可能性*后果）有关

到目前为止，这些信息只会在工具提示中发布在它所属的（x，y）坐标上，麻烦的是它所附加的正方形必须悬停在上方以显示工具提示，这有点不方便。我想根据严重性添加不同的字体图标，如下所示：

这适用于附加在绿色方框中的项目。

这适用于附加在黄色方框中的项目。

这适用于附加在红色方框中的项目

在我的代码片段中，您可以看到我在试图附加第一个代码来测试它时注释掉的地方，它告诉我

“uncaughttypeerror:document.getElementById（…）.innerHTML不是函数”

更新Yash提供了一种有效的附加方法，回答了部分问题。在新更新的代码段中，我创建了一个条件，根据ConsequencexLikelihood的值附加三种不同类型的字体图标，现在没有任何内容附加到表中

const dataFromFetch={
“可能性”：4，
“后果”：3，
“严重性”：12，
“类别”：“类别名称”，
“状态”：“活动”，
“标题”：“这是事件的标题”，
“优先级”：“高”
}
if（dataFromFetch.result==1&&dataFromFetch.likelion=4）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==3&&dataFromFetch.likelion>2&&dataFromFetch<5）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==4&&dataFromFetch.likelion>1&&dataFromFetch.likelion<4）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==5&&dataFromFetch.likelion<3）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==5&&dataFromFetch.likelion>=3）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==4&&dataFromFetch.likelion>=4）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
}if（dataFromFetch.result==3&&dataFromFetch.likelion==5）{
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
} 
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.Result）.innerHTML=''；
document.getElementById（dataFromFetch.likelion+'-'+dataFromFetch.result）。标题=
dataFromFetch.category+'\n'+
dataFromFetch.Status+'\n'+
dataFromFetch.Title+“\n”+
dataFromFetch.Priority

.box{
位置：相对位置；
背景颜色：浅灰色；
颜色：#fff；
边界半径：0px；
填充：20px；
字体大小：150%；
边框：1px纯黑；
}
.包装纸{
利润率：60px 0 90px 90px；
显示：网格；
网格间距：0；
网格模板列：重复（5100px）；
网格模板行：重复（5100px）；
网格自动流：列；
}
#红色的{
背景色：红色；
}
#黄色的{
背景颜色：黄色；
}
#绿色的{
背景颜色：绿色；
}
部分{
位置：相对位置；
宽度：600px；
}
p、 可能性{
变换：旋转（-90度）平移（-50%）；
变换原点：顶部；
位置：绝对位置；
最高：50%；
左：-20px；
字体大小：30px；
保证金：0；
}
p、 后果{
字体大小：30px；
位置：绝对位置；
转化：translateX（-50%）；
左：计算（50%+45px）；
底部：-60px；
保证金：0；
}
.货柜编号{
位置：绝对位置；
显示器：flex；
}
.number-container-x{
填充顶部：10px；
左：90px；
底部：-25px；
}
.number-container-x.number{
宽度：100px；
文本对齐：居中；
}
.编号-y{
弯曲方向：柱反向；
左：70像素；
排名：0；
}
.number-container-y.number{
高度：100px；
线高：100px；
}

1.
2.
3.
4.
5.
1.
2.
3.
4.
5.

可能性


结果

您可以直接为innerHTML赋值，因为它不是函数。因此，您需要删除括号，只需为其赋值即可

const dataFromFetch={
“可能性”：4，
“后果”：3，
“严重性”：12，
“类别”：“类别名称”，
“状态”：“活动”，
“标题”：“这是事件的标题”，
“优先级”：“高”