Home / Questions / 60340
Accepted
bypabloc_
Asked: 2020-04-05 06:07:30 +0800 CST 2020-04-05 06:07:30 +0800 CST

How to create a button with jquery and contain a span tag?

  • 772

I think the buttonwith jQueryworks for me but I can't make the labels spanrecognize them with html.

$(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar',
            'text'    : '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>'
        });
        $( '#contenedor').append(boton.prop('outerHTML'));
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

jquery

4 Answers

  1. Best Answer

    You just have a little bug instead of using textuse html.

    textit is only for text and htmlis rendered as an element of theDOM

    $(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar',
            'html'    : '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>'
        });
        $( '#contenedor').append(boton.prop('outerHTML'));
    
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

    Taking into account the proposal of @User2930137 only a small modification but it is exactly the same, maybe a little more complex

    The modification consists of only doing a solo .append()in the following way:

    .append(
  $('<span />', {
    'class': 'fa fa-edit'
  })
  ,
  $('<span />', {
    'class': 'hidden-xs',
    'text': 'Editar'
  })
);

    What is really being done here is to create two elements and when concatenating with .append()they are separated by ,.
    This avoids making 2 .append()of two elements $('#contenedor').append(boton.append(span).append(span2));like @User2930137 does .

    Final score

    $(document).on('click', '#Crear', function() {
  var boton = $('<button/>', {
    'type': 'button',
    'class': 'editar edit-modal btn btn-warning',
    'id': 'ButtonEditar'
  }).append(
    $('<span />', {
      'class': 'fa fa-edit'
    }),
    $('<span />', {
      'class': 'hidden-xs',
      'text': 'Editar'
    })
  );

  $('#contenedor').append(boton);

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

    • 17

  2. Instead of putting the spanin the attribute texto, after creating the button, and taking its IDyou put it in theinnerHTML

    $(document).on('click', '#Crear', function() {

  if (!document.getElementById("ButtonEditar")) {
    var boton = $('<button/>', {
      'type': 'button',
      'class': 'editar edit-modal btn btn-warning',
      'id': 'ButtonEditar'

    });

    $('#contenedor').append(boton);
    document.getElementById("ButtonEditar").innerHTML = '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>';
  }

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

    • 8

  3. The way you were trying to do this with jQuery would be to create three objects; one the button and the other the span and make it just like you intended.

    I borrowed the code from @JuankGlezz and modified what is necessary for this example. 

    $(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar'
        });
        var span = $('<span />', {
            'class' : 'fa fa-edit'
        }); 
        var span2 = $('<span />', {
            'class' : 'hidden-xs',
            'text' : 'Editar'
        });
 
        $('#contenedor').append(boton.append(span).append(span2));
    
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

    • 7

  4. You can create the button from a string literal

    $(document).on('click', '#Crear', function() {
  var boton = '<button class="editar edit-modal btn btn-warning" type="button" id="ButtonEditar"><span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span></button>';
  $('#contenedor').append(boton);

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

    • 3