how to add font awesome icon to a button dynamically using javascript and html?

Question

i want to create the html code below dynamically using javascript

<button id="add_row" style="background-color:#90EE90;"  onclick="add(event)" >
                             <i class="fa fa-plus"  style="font-size: 2em;"></i> 
                          </button>

this is how create every element separately

          var deletebutton =  document.createElement("INPUT");
        deletebutton.setAttribute("type", "button");
      deletebutton.setAttribute("onclick", "add('div" + i + "')");

      var icondelete =  document.createElement("i");
      icondelete.setAttribute("class", "fa fa-times");
          icondelete.setAttribute("style", "font-size: 2em;");

so how to put the icon icondelete inside the button deletebutton

Answer 1

Since icondelete is a node and so is deletebutton, you can use appendChild

deletebutton.appendChild(icondelete);

for the click handler you can do this

deletebutton.addEventListener("click",function(evt){
   add(evt)
});

Also you need to use BUTTON not input for the button, inputs can't have HTML children or any children for that matter.

var deletebutton =  document.createElement("button");