Comment ajouter dynamiquement une police génial Icône avec le script java?

Question

J'ai une table et je l'ai mis en place pour ajouter dynamiquement des lignes avec un bouton. J'ai quelques problèmes pour savoir comment ajouter dynamiquement une icône génial de la police à la fin.

Voici le code pour ajouter la ligne du tableau. Il ajoute les quatre premières cellules au besoin mais j'ai besoin de la 5ème cellule si vous voulez être l'icône 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); 
} 

Comme vous pouvez le voir pour la cellule row4 il crée le td avec l'élément h5 je crée une classe et puis essayer de le joindre, mais lors de l'ajout d'une ligne de la table il affiche simplement le code qui se trouve dans les parenthèses après ajouter.

console view

Je trouve que ce code fonctionne sur son propre mais pas sûr de savoir comment incorporer à la peine avec mon code. Il ajoute l'icône FA à côté de l'élément h1 avec la classe sourceText avec un onclick.

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

Si elle aide ici est le codepen https://codepen.io/FrontN_Dev/pen/vJNvEb

Answer 1

On dirait append est le coupable sur cette ligne e.appendChild('<i class="fa fa-trash-o" aria-hidden="true"></i>');

Utilisez appendChild

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

Answer 2

essayer simplement d'échanger e.append('<i class="fa fa-trash-o" aria-hidden="true"></i>'); par

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

Cela devrait rendre votre icône correctement. Vous ajoutez seulement du texte qui n'est pas analysé en HTML.