Erstellen eines Elements in einem Element mit Jquery

Question

Ich versuche, ein Element mit einem Element darin in JQuery zu erstellen, aber ich bekomme nichts, wenn ich es versuche und es ausgeben.

Dies ist die HTML-Äquivalent dessen, was ich suche:

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>

(Beachten Sie, dass die mehrfache Verwendung einer ID auf einer einzelnen Seite falsch ist. Stick mit Klassen statt)

Answer 2

Der jQuery-Code ist völlig ich gebrochen.

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)