How to dynamically add a font awesome Icon with javascript?

Question

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

Toddle

Answer 1

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.

Smoky

That works but when trying to delete the row it only deletes the icon. I figured it out though. – Toddle

@Marc Scheib it's not working document.createElement('span').innerHtml = '<i class="fa fa-trash-o" aria-hidden="true"></i>' not working – Urias

Answer 2

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

Fond

Thank you for your response but using appendChild did not work. After messing around with it in the console I finally got it to work. e.setAttribute("class","sourceText fa fa-trash-o"); $(e.sourceText).append('<i class="fa fa-trash-o"></i>'); Added the class fa fa-trash-o to the setAttribute and a dollar sign to the next line. – Toddle

appendChild does not work. Throws the error - testbed-util.js:118 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.. Mark Scheib's answer using innerHTML works. – Cromorne

Answer 3

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

Thermophone