0

Buenas mi duda es esta cuando recibo un valor en una variable quiero que aparezca un icono

este seria el HTML

<p><b>Compra : </b><span id="view_compra" class="text-success"></span></p>

y con una funcion javacript pido los datos para que llene un modal aqui la funcion:

if(result.EV_consolidacion == 1){
        $("#view_compra").text('<span class="glyphicon glyphicon-ok"></span>');
      }

pero al llegar a HTML llega de esta forma:

<p><b>Compra : </b><span id="view_compra" class="text-success">&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;</span></p>

y solo me llega literal la linea de codigo, entrando a inspector de elementos y cambiando el valor de & lt; por < y & gt; por > si me funciona.

Que hago para que reciba el < y > y no su valor & lt; y & gt;

3
  • cambia el .text por .append el 6 may. 2019 a las 21:12
  • 2
    si lo que deseas es agregar dentro de ese espan el nuevo "span" con la clase de icono usa "$("#view_compra").html('<span class="glyphicon glyphicon-ok"></span>');" el 6 may. 2019 a las 21:15
  • Gracias diego, sirve pero se guarda en cache , la solucion que le busque a eso fue colocar otro icono por si no cumple la condicion
    – Roga
    el 6 may. 2019 a las 21:30

3 respuestas 3

1

El problema está en que estás añadiendo el icono como si fuera texto y no como la etiqueta span, en este caso la solución más practica que se me ocurre es añadirle las clases directamente desde el javascript de la siguiente manera:

  • Capturas el elemento donde quieres que aparezca tu icono:

const elemento = document.querySelector('#view_compra');
  • Le añades las clases de glyphicon al elemento con la propiedad classlist:

elemento.classList.add('glyphicon','glyphicon-ok');

Espero que te sirva ;)

6
  • Listo Gracias, funciona , pero se queda como el resultado en cache jajaja mi solucion para eso fue colocar un icono tambien para cuando no cumpla la condicion.
    – Roga
    el 6 may. 2019 a las 21:30
  • ahora me guarda el resultado anterior no importa si cumpla o no la condicion :c
    – Roga
    el 6 may. 2019 a las 21:42
  • @Roga claro y es que esta solución te agrega clases y si quieres cambiar el icono debes eliminar la clase anterior y escribir la nueva (asumo que la que quieres cambiar es glyphicon-ok). Además te presentaron otras soluciones en las que agregas un objeto como html en vez de texto y es que debes diferenciar el agregar texto normal o texto que debe ser interpretado como html, para agregar texto utilizas la función de jquery text() mientras que para agregar html hay varias como append() prepend() html() etc.
    – LPZadkiel
    el 6 may. 2019 a las 21:56
  • Bueno, si tienes una función que se encarga de validar si se cumple o no la condición, para remover el icono solo tienes que ejecutar la siguiente línea: elemento.classList.remove('glyphicon','glyphicon-ok'); el 6 may. 2019 a las 21:56
  • @LPZadkiel si lo de las funciones lo entendi y lo de esta parte " eliminar la clase anterior y escribir la nueva" con esto me has iluminado la mente XD debo cambiar el valor gracias!
    – Roga
    el 6 may. 2019 a las 21:59
0

Puedes agregar un elemento con la funcion append:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <script type="text/javascript">

    $( document ).ready(function() {
        $("#view_compra").append ('<span class="glyphicon glyphicon-ok"></span>');
    });

    </script>


</head>
<body>
    <p><b>Compra : </b><span id="view_compra" class="text-success"></span></p>
    <span class="glyphicon glyphicon-star"></span>
</body>
</html>

0

En jquery puedes utilizar el método append(), agrega al "parent" la etiqueta que ocupas, e.j:

 $("#view_compra").append('<span class="glyphicon glyphicon-ok"></span>');

Si requieres que la etiqueta se agregue al principio de "", se utiliza el método prepend, e.j:

$("#view_compra").prepend('<span class="glyphicon glyphicon-ok"></span>');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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