13

Creo la el button con jQuery me funciona pero no logro hacer que las etiquetas span me las reconozca con 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>

2
  • Con javascript podrías colocal ago como: document.getElementById('tuBoton').InnerHTML = "tu código HTML"; ¿has intentado un ajuste similar al que sugiero o necesitas una solución netamente en Jquery? el 4 abr. 2017 a las 14:26
  • 2
    @MauricioAriasOlave shhh en eso se basa mi respuesta xDD
    – lois6b
    el 4 abr. 2017 a las 14:27

4 respuestas 4

17
+150

Solo tienes un pequeño error en vez de usar text usa html.

text solo es para texto y html se renderiza como elemento del 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>


Tomando en cuenta la propuesta de @User2930137 solo una pequeña modificación pero es exactamente lo mismo, tal vez si un poco mas compleja

La modificación consta en solo hacer un solo .append() de la siguiente forma:

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

Lo que se esta haciendo realmente aquí es crear dos elementos y al concatenar con .append() son separados por ,.
Así se evita hacer 2 .append() de dos elementos $('#contenedor').append(boton.append(span).append(span2)); como lo hace @User2930137.

Resultado final

$(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>

4
  • justo lo que buscaba
    – bypabloc_
    el 4 abr. 2017 a las 14:49
  • Una pregunta mas: ¿Como puedo indicar la etiqueta disabled? intento con 'disabled' : true y no me funciona.
    – bypabloc_
    el 4 abr. 2017 a las 14:50
  • 2
    @PabloContreras si me funciona poniendo eso. recordaste añadir la coma separando atributos?
    – lois6b
    el 4 abr. 2017 a las 14:52
  • 1
    era eso @lois6b gracias.
    – bypabloc_
    el 4 abr. 2017 a las 15:28
8

En vez de poner el span en el attributo texto, tras crear el boton, y cogiendo su ID se lo metes en el 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>

9
  • Hola, @lois6b, tu ejemplo no funciona en mi navegador. Sigo dando clics en el bottón del plus después del primer elemento creado los demás me los crea sin el icono de editar. el 4 abr. 2017 a las 15:34
  • @user2930137 oh :/ qué navegador usas?
    – lois6b
    el 4 abr. 2017 a las 15:35
  • Chrome. A ti sí te salen todos los botones creados a partr del plus con el signo de editar? el 4 abr. 2017 a las 15:36
  • mano, a mi tambien me pasa igual que a @user2930137, y utilizo chrome la ultima version.
    – bypabloc_
    el 4 abr. 2017 a las 15:38
  • lois6b, ¿estás seguro/a de que si creas muchos botones dándole varios clics a tu icono de plus te los crea correctamente? Está raro xd el 4 abr. 2017 a las 15:40
7

La manera en que intentabas hacer esto con jQuery sería la creación de tres objetos; uno el botón y los otros los span y hacerlo justo como lo intentabas.

Tomé prestado el código de @JuankGlezz y modifiqué lo necesario para este ejemplo.

$(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>

2
  • 5
    Me gusta! no es necesario usar $(boton), puede ser directamente boton.append ;)
    – g3rv4
    el 4 abr. 2017 a las 15:38
  • Vale, ya lo modifico ehehe gracias el 4 abr. 2017 a las 15:40
3

Puedes crear el botón a partir de una cadena 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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.