如何使用javascript和html動態地向按鈕添加字體真棒圖標？

Question

我想使用javascript動態創建下面的html代碼

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

這就是分別創建每個元素的方式

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

那么如何將圖標icondelete放在按鈕deletebutton

Answer 1

由於 icondelete 是一個節點，deletebutton 也是一個節點，因此您可以使用 appendChild

deletebutton.appendChild(icondelete);

對於點擊處理程序，您可以執行此操作

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

此外，您需要使用 BUTTON not input 按鈕，輸入不能有 HTML 子項或任何子項。

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