Jqueryを使って要素内に要素を作成する

Question

要素をJQueryで内部に作成しようとしていますが、出力しようとすると何も表示されません。

これは私が探しているもののHTMLと同等です：

HTML：

<div class="btn-icn"> 
    <button class="btn"> 
     <span class="glyphicon glyphicon-comment"></span> 
    </button> 
</div> 

のjQuery：

a = $(button).attr({ 
    class: "btn"; 
    id:"btn"; 
}.append($(icon).attr({ 
    class:"glyphicon glyphicon-comment"; 
    id="comment"; 
})); 

alert(a); 

Answer 1

$("<button/>", { // here goes the properties: 
 
    appendTo : ".btn-icn", 
 
    class : "btn", 
 
    id : "btn", 
 
    on : { 
 
     click : function(){ alert(this.tagName); } 
 
    }, 
 
    append : $("<span/>", { 
 
    class : "glyphicon glyphicon-comment", 
 
    id : "comment" 
 
    }) 
 
});

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div class="btn-icn"></div>

（1つのページで複数回IDを使用すると間違っていることに注意してください。代わりに、クラスに固執）

Answer 2

jqueryのコードは完全に私に壊れている：。

var a = $('<a />').attr({ 
    class: "btn", //comma not semicol 
    id:"btn" 
}); 

var icon = $('<i></i>').attr({ 
    class: "glyphicon glyphicon-comment", 
    id: "comment" //no equal sign in an object, property: value 
}); 

a.append(icon)