How to create a button with jquery and that contains a span tag?

Navigation
10

I think the button with jQuery works for me but I can not make the span tags recognize 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>
    
asked by Pablo Contreras 04.04.2017 в 16:07
source

4 answers

14

You only have a small error instead of using text usa html .

text is only for text and html is rendered as an element of DOM 

$(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 just a small modification but it is exactly the same, maybe if a little more complex

The modification consists in only doing a single .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() are separated by , .
This avoids doing 2 .append() of two elements $('#contenedor').append(boton.append(span).append(span2)); as it does @ User2930137 .

Final result 

$(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>
    
answered by 04.04.2017 / 16:18
source
5

The way you tried to do this with jQuery would be the creation of three objects; one the button and the others the span and do it just as you tried.

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>
    
answered by 04.04.2017 в 17:35
5

Instead of putting the span in the attribute texto , after creating the button, and taking its ID you enter it in innerHTML 

$(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>
    
answered by 04.04.2017 в 16:17
2

You can create the button from a literal string 

$(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>
    
answered by 04.04.2017 в 16:19
C ++ Questions about the Goto instruction Can I enter special characters from a JSON?