![](/img/trans.png)
[英]how to add font awesome icon to a button dynamically using javascript and html?
[英]How to dynamically add a font awesome Icon with javascript?
我有一个表,我已将其设置为使用按钮动态添加行。我在弄清楚如何动态添加字体真棒图标到末尾时遇到了一些问题。
下面是添加表格行的代码。 它会根据需要添加前四个单元格,但如果您要成为 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);
}
正如您在单元格 row4 中看到的那样,它使用 h5 元素创建了 td,然后我创建了一个类,然后尝试附加它,但是在添加表格行时,它只显示附加后括号中的代码。
我发现这段代码可以独立工作,但不确定如何将它与我的代码结合起来。 它在带有 onclick 类 sourceText 的 h1 元素旁边添加了 FA 图标。
function pronounce() {
$('h1.sourceText').append('<i class="fa fa-trash-o" aria-hidden="true">
</i>');
};
只需尝试交换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 的文本。
看起来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>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.