如何用javascript动态添加一个很棒的字体图标？

Question

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

下面是添加表格行的代码。它根据需要添加前四个单元格，但如果您愿意成为 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，然后我创建一个类，然后尝试附加它，但在添加表行时，它只显示附加后括号中的代码。

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

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

Answer 1

只需尝试通过

兑换

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

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

这应该可以正确呈现您的图标。您仅附加一些未解析为 HTML 的文本。

Answer 2

看起来

append

是这条线上的罪魁祸首

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>');

Answer 3

let i = document.createElement("i");
    i.classList.add("fa","fa-trash-o")
    e.appendChild(i)

简单地搜索如何在javascript中添加类属性，我找到了这段代码

myElement.classList.add('one-class', 'one-more-class');