动态按钮上的字形图标答案

【问题标题】：Glyphicon on dynamic button动态按钮上的字形图标
【发布时间】：2014-09-25 13:15:53
【问题描述】：

我正在尝试向我的 javascript 文件中动态创建的按钮添加一个字形图标。我可以将它添加到实际的 html 文件中，但我不知道如何从 javascript 中添加它

function createRemoveIcon(){
    var icon = document.createElement("span");

    icon.className ="glyphicon glyphicon-remove-circle";

    alert("test" + icon);
}

或者这就是我最初尝试创建它的方式

function createRemoveRowButton(attendeeArrayIndex) {
    var removeIcon = document.getElementById("removeIcon");

    var removeRowButton = document.createElement("BUTTON");
    var icon = document.createTextNode(removeIcon);
    removeRowButton.appendChild(icon);
    removeRowButton.onclick = function() {
        deleteRow(attendeeArrayIndex);
    };
    return removeRowButton;
}

【问题讨论】：

一个 jsfiddle 链接会有所帮助。

标签： javascript twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

希望我能正确理解您的问题。您想通过 javascript 添加一个按钮，然后向该按钮添加一个图标。

这个例子在DOM中添加了一个按钮，当你点击这个按钮时；它将图标附加到自身。

JSFiddle：http://jsfiddle.net/e9f2M/1/

function createRemoveIcon(){
    var button = document.createElement("button");
    button.setAttribute('class', 'btn btn-default');
    button.innerHTML = 'click me';
    button.onclick = function(){ 
        var icon = document.createElement("span");

        icon.className ="glyphicon glyphicon-remove-circle";
        this.appendChild(icon);
    }
    document.getElementById("container").appendChild(button);
}

【讨论】：

【解决方案2】：

            var p=document.createElement("p")
          var ActiveBtn = document.createElement("button");  
          var sp1 = document.createElement("span");

           sp1.style.color = "green";
           sp1.setAttribute("class", "glyphicon glyphicon-off");
           sp1.setAttribute("class", "glyphicon glyphicon-ok-circle");
            ActiveBtn.appendChild(sp1);

p.appendChild(ActiveBtn)

【讨论】：

介意解释一下您的解决方案吗？