Javascript 如何使用javascript动态添加字体真棒图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45378428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically add a font awesome Icon with javascript?
提问by Mark White
I have a table and I have it set up to dynamically add rows with a button.I am having some issues figuring out how to dynamically add a font awesome icon to the end.
我有一个表格，我将它设置为使用按钮动态添加行。我在弄清楚如何将字体真棒图标动态添加到最后时遇到了一些问题。
Below is the code to add the table row. It adds the first four cells as needed but I need the 5th cell if you will to be the FA icon.
下面是添加表格行的代码。它根据需要添加前四个单元格，但如果您想成为 FA 图标，我需要第 5 个单元格。
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);
}
As you can see for the cell row4 it creates the td with the h5 element then I create a class and then try to append it but when adding a table row it just displays the code that's in the brackets after append.
正如您所看到的，对于单元格 row4，它使用 h5 元素创建了 td，然后我创建了一个类，然后尝试追加它，但是在添加表格行时，它只显示追加后括号中的代码。
I found this code to work on its own but not sure how to incorporate it to worth with my code. It adds the FA icon next to the h1 element with the class sourceText with an onclick.
我发现这段代码可以独立工作，但不确定如何将它与我的代码结合起来。它使用 onclick 将 FA 图标添加到类 sourceText 的 h1 元素旁边。
function pronounce() {
$('h1.sourceText').append('<i class="fa fa-trash-o" aria-hidden="true">
</i>');
};
回答by Muthu Kumaran
Looks like appendis the culprit on this line e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');
看起来append是这条线的罪魁祸首e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');
Use appendChild
用 appendChild
e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');
回答by Marc Scheib
Simply try to exchange e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>');by
只是一味的交换e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>');通过
e.innerHTML = '<i class="fa fa-trash-o" aria-hidden="true"></i>';
This should render your icon correctly. You are only appending some text which is not parsed as HTML.
这应该正确呈现您的图标。您只是附加了一些未解析为 HTML 的文本。
