1

Estaba escribiendo código jQuery para una respuesta aquí.

El código lee un archivo JSON con diferentes claves y de forma dinámica asigna cada valor a los inputs de un formulario usando val(). Algo así:

                        $.each(value, function(key, value){
                            $('#'+key).val(value);
                        });

El problema es que también tengo en el DOM un <div id="error"></div> para mostrar mensajes de error, cuando el JSON venga con una clave llamada error... pero mi bucle anterior no me sirve, ya que no puedo usar val() en caso de que sea un div.

Tuve entonces que recurrir a text y modificar mi código de esta forma:

                    /*Mostramos posibles  errores*/
                    if(value.hasOwnProperty('error')){
                        $('#error').text(value["error"]);
                    }else{
                        $.each(value, function(key, value){
                            $('#'+key).val(value);
                        });
                    }

Me surgió entonces la pregunta sobre la diferencia entre esos métodos que existen en jQuery para asignar valores a los elementos: val(), text() y html().

¿Por qué por ejemplo no puedo usar val() para mostrar mis mensajes en el div? ¿Cuál es el motivo para que funcionen distintamente?

1 respuesta 1

2

.val() se usa para leer/definir el valor de un campo (input, select, textarea). Como lo que se está cambiando sería el atributo value del elemento, no funcionará en otros elementos como div que no tienen atributo value.

.text() se usa para leer/definir el texto contenido en un elemento (sea el que sea) y sus descendientes. Es decir, devolverá el texto sin etiquetas HTML. Y si se usa para asignar un valor, las etiquetas se mostrarán como texto (p.e. < se convertirá en &lt;).

.html() se usa para leer/definir el código HTML contenido en un elemento (sea el que sea) y sus descendientes. Con esto no sólo se devolverá el texto sino también las etiquetas HTML.


Por ejemplo, en el siguiente código:

<div id="midiv">
  Hola 
  <span>Caracola</span>
</div>

Si se hace $("#midiv").val() se obtendrá una cadena vacía (porque como es un div no tiene un valor). Si se hace $("#midiv").text() el resultado será Hola Caracola (sólo el texto sin etiquetas). Y si se hace $("#midiv").html() el resultado será Hola <span>Caracola</span>.

5
  • Pensé lo que tú dices sobre text, pero no me funciona en los input. Yo intenté esto en mi bucle: $('#'+key).text(value); y no me funcionó. La idea era no tener que recurrir al if para asignar valores al div en el caso de errores, pero no logré encontrar un método que asigne valores indistintamente a los inputs o a los div.
    – A. Cedano
    Commented el 1 ene. 2018 a las 20:49
  • .text() no va a funcionar en un input, porque son etiquetas simples que no tienen texto/código dentro. ¿Entonces lo que quieres es usar algo que funcione independientemente de la etiqueta que sea sin el if?
    – Alvaro Montoro
    Commented el 1 ene. 2018 a las 20:57
  • Correcto, un método que sirva para cambiar los valores sea de los input, sea de los div. De ese modo, recorrería el JSON sin tener que recurrir al if.
    – A. Cedano
    Commented el 1 ene. 2018 a las 20:59
  • Que yo sepa no hay ningún método (aunque puede haber cambiado). Una posibilidad sería tener el valor que quieres poner en una variable y hacer .val() y .text() encadenados. (algo como .val(nuevoValor).text(nuevoValor)). Hacer val en un elemento que no tiene valor, no afectaría en nada; y hacer text en un input tampoco afectaría (pero podría dar problemas con un select).
    – Alvaro Montoro
    Commented el 1 ene. 2018 a las 21:02
  • En ese caso sería mejor el if.
    – A. Cedano
    Commented el 1 ene. 2018 a las 21:26

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.