动态按钮上的Glyphicon

时间:2014-08-02 13:13:14

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

我试图在我的javascript文件中为动态创建的按钮添加一个glyphicon。 我可以在实际的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;
}

2 个答案:

答案 0 :(得分:0)

我希望我能正确理解你的问题。您想通过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);
}

答案 1 :(得分:0)

            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)