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.

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.

console view

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.

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

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.

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.

console view

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.

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

• javascript
• font-awesome

3 Answers 3

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

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.

Looks like append is the culprit on this line e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');

Use appendChild

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

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

Simply search for how to add classes attribute in javascript and i found this code

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