如何在动态创建的按钮中添加字体真棒图标

Question

In my HTML page I have a button in each row in a particular column. User may add new rows at runtime and these buttons are also inserted alongwith rest of the fields in each row.

The buttons are being appended using the following:

function funcAddBtnOpenPad() {   // This funct being called at page onload
// VARS FOR ADDING BUTTON IN CELL "5"
// STORING BUTTON ATTRIBUTES
var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad', name:'btnOpenPad', value:'OpenPad' });

$('#childTable tr').each(function(tempRowIdx) {
    
// CONSTRUCT TAG FOR BUTTON "OpenPad" IN CELL "5"
    tempButtonCellTag = 'id_tIndx'+tempRowIdx+5;

// HERE WE ARE INSERTING THE BUTTON "OpenPad" <<<<
        $('#'+ tempButtonCellTag).append(btnOpenPad);
});
}

Now to insert an icon in the button I added the ref to the fa icon in the button class like the following:

var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad fa fa-pencil', name:'btnOpenPad', value:'OpenPad' });

However, the icon is completely missing from the button, the only change being that the size of the button and the font of the text has changed .

My question is: Is there a way I may insert a font awesome icon in the button so appended?

Image of the html table with buttons is reproduced here.

Answer 1

try adding via html () instead of appand()

let ButtonCellTag = $('#'+ tempButtonCellTag);
ButtonCellTag.html(ButtonCellTag.html() + btnOpenPad)