I use append() when creating buttons. How do I have a < span > within the append text?

Basically I want to do this

<button type="button" class="btn btn-default" id="test1" >
     <span class="glyphicon glyphicon-arrow-left"></span>
</button>

here

$( '<button />' , { class: 'btn btn-default', type: 'button', id: 'test1' })

I use append() when creating buttons. How do I have a < span > within the append text?

Basically I want to do this

<button type="button" class="btn btn-default" id="test1" >
     <span class="glyphicon glyphicon-arrow-left"></span>
</button>

here

$( '<button />' , { class: 'btn btn-default', type: 'button', id: 'test1' })

• javascript
• jquery

• put class="glyphicon glyphicon-arrow-left" in button 'value' attribute – Sagar Naliyapara Commented Mar 26, 2015 at 3:22

3 Answers 3

You can use the html attribute as well like this

$('<button />', {
  class: 'btn btn-default',
  type: 'button',
  id: 'test1',
  html: '<span class="glyphicon glyphicon-arrow-left"></span>'
});

Here is a reference

var b = $( '<button />' , { class: 'btn btn-default', type: 'button', id: 'test1', html: '<span class="glyphicon glyphicon-arrow-left"></span>' });
$('body').append(b);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You may use html:

    $( '<button />' , { 'class': 'btn btn-default', type: 'button', id: 'test1',
         html: '<span class="glyphicon glyphicon-arrow-left"></span>' })

Notice: class is a reserved word. So use it inside the quote.

How about this :

$( '<button />' , { 
     class   : 'btn btn-default', 
     type    : 'button', 
     id      : 'test1', 
     html    : '<span class="glyphicon glyphicon-arrow-left"></span>' 
})