如何使用javascript动态添加字体图标？

我有一个表格，我用一个按钮将其设置为动态添加行。我在弄清楚如何在末尾动态添加一个很棒的字体图标时遇到了一些问题

下面是添加表行的代码。它会根据需要添加前四个单元格，但如果你想成为FA图标，我需要第五个单元格

var insertRow = document.getElementById("addRow");
insertRow.onclick = function() {
var x = document.getElementById("myTable");
var row = x.insertRow(x.rows.length);

    var cell = row.insertCell(0);
    var a = document.createElement("input");
        a.setAttribute("type","text");
        a.setAttribute("class","billInfo");
        cell.appendChild(a);

    var cell1 = row.insertCell(1);
    var b = document.createElement("input");
        b.setAttribute("type","number");
        b.setAttribute("class","billAmt");
        b.setAttribute("onkeyup","calc(this)");
        cell1.appendChild(b);

    var cell2 = row.insertCell(2);
    var c = document.createElement("input");
        c.setAttribute("type","date");
        c.setAttribute("class","date");
        cell2.appendChild(c);

    var cell3 = row.insertCell(3);
    var d = document.createElement("input");
        d.setAttribute("type","text");
        d.setAttribute("class","commentBox");
        cell3.appendChild(d); 

    var cell4 = row.insertCell(4);
    var e = document.createElement("h5");
    e.setAttribute("class","sourceText");
    e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>');
    e.addEventListener("click", removeRow);
    e.addEventListener("click", calc);
    cell4.appendChild(e);
 }

var insertRow=document.getElementById（“addRow”）；
insertRow.onclick=函数（）{
var x=document.getElementById（“myTable”）；
变量行=x.insertRow（x.rows.length）；
变量单元格=行插入单元格（0）；
var a=document.createElement（“输入”）；
a、 setAttribute（“类型”、“文本”）；
a、 setAttribute（“类”、“billInfo”）；
第1单元：儿童（a）；
var cell1=行插入单元格（1）；
var b=document.createElement（“输入”）；
b、 setAttribute（“类型”、“编号”）；
b、 setAttribute（“类别”、“金额”）；
b、 setAttribute（“onkeyup”、“calc（this）”）；
第1单元：儿童（b）；
var cell2=行插入单元格（2）；
var c=document.createElement（“输入”）；
c、 setAttribute（“类型”、“日期”）；
c、 setAttribute（“类别”、“日期”）；
细胞2.附属物（c）；
var cell3=行插入单元格（3）；
var d=document.createElement（“输入”）；
d、 setAttribute（“类型”、“文本”）；
d、 setAttribute（“类”、“注释框”）；
第3单元：儿童（d）；
var cell4=行插入单元格（4）；
var e=document.createElement（“h5”）；
e、 setAttribute（“类”、“源文本”）；
e、 附加（“”）；
e、 addEventListener（“单击”，删除箭头）；
e、 addEventListener（“单击”，计算）；
第4单元：儿童（e）；
}

正如您可以看到的，对于单元格row4，它使用h5元素创建td，然后我创建一个类，然后尝试附加它，但在添加表行时，它只显示附加后括号中的代码

我发现这段代码可以独立工作，但不确定如何将其与我的代码结合起来。它将FA图标添加到h1元素旁边，该元素的类sourceText带有onclick

 function pronounce() {  
  $('h1.sourceText').append('<i class="fa fa-trash-o" aria-hidden="true">
  </i>');
 };

函数发音（）{
$（'h1.sourceText'）.append（'
');
};

看起来

append

是这一行的罪魁祸首

e.appendChild（“”）

使用
appendChild

e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');

e.appendChild（“”）；
只需尝试交换
e.append（“”）按

e.innerHTML = '<i class="fa fa-trash-o" aria-hidden="true"></i>';

e.innerHTML=''；

这将正确呈现您的图标。您只添加了一些未解析为HTML的文本。
谢谢您的回复，但使用appendChild无效。在控制台里摆弄它之后，我终于让它工作了。e、 setAttribute（“类”、“源文本fa-trash-o”）；$（e.sourceText）.append（“”）；将类fa-trash-o添加到setAttribute，并在下一行添加美元符号。
appendChild
不起作用。抛出错误-
testbed util.js:118未捕获类型错误：未能在“节点”上执行“appendChild”：参数1不是“节点”类型。
's使用
innerHTML
的答案有效。这有效，但当尝试删除行时，它只会删除图标。不过我想出来了。