如何使用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);
 }

正如你可以看到单元格row4它用h5元素创建td然后我创建一个类然后尝试追加它但是当添加一个表行时它只显示追加后括号中的代码.

console view

我发现这个代码可以独立工作,但不知道如何使用我的代码将其合并到值.它将h1元素旁边的FA图标添加到带有onclick的类sourceText.

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

如果它有帮助,这里是codepen https://codepen.io/FrontN_Dev/pen/vJNvEb

解决方法:

看起来追加是这一行的罪魁祸首e.appendChild(‘< i class =“fa fa-trash-o”aria-hidden =“true”>< / i>‘);

使用appendChild

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

标签：javascript,font-awesome
来源： https://codeday.me/bug/20190828/1751131.html