Creating an element in an element with Jquery

Question

I'm trying to create an element with an element inside of it in JQuery, but I'm not getting anything when I try and output it.

This is the HTML equivalent of what I'm looking for:

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

That indentation though... Pretty sure there is a syntax error somewhere. — Karl-André Gagnon
– Karl-André Gagnon, Commented Mar 30, 2016 at 17:00

Roko C. Buljan · Accepted Answer · 2016-03-30 17:08:05Z

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>

(Be aware that using an ID multiple times on a single page is wrong. Stick with classes instead.)

edited Mar 30, 2016 at 17:08

answered Mar 30, 2016 at 17:00

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

soyuka · Accepted Answer · 2016-03-30 17:02:09Z

0

The jquery code is totally broken to me:

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)

answered Mar 30, 2016 at 17:02

soyuka

9,1554 gold badges42 silver badges55 bronze badges

Collectives™ on Stack Overflow

Creating an element in an element with Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related