jQuery: método val() vs text()

En ocasiones uno quiere establecer un texto a un span utilizando jQuery, pero por aguna razón no funciona, veamos un ejemplo:

Código HTML:

<span>Hola Mundo!!!</span>

<script>
          $('span').val('Hola Mundo!!!');
</script>

Y uno se queda pensando, por qué rayos no aparece el texto en el span?, y esa pregunta se la repite uno un buen rato!

La respuesta del por qué no aparece el texto en el span es porque el span no tiene el atributo value. Hay que recordar una cosa y es que todos los elementos HTML si tienen los mismos atributos pero es solo un conjunto de atributos, muy conocidos por cierto!. Se les conoce como "Global Attributes". Ejemplo de atributos globales pueden ser: id, style, class, lang, title, etc. Sin embargo existen otros tipos de atributos únicos para algunos elementos.

En HTML existe el concepto de "Content Model", se refiere al contenido que pueden tener los elementos de HTML. El contenido de un elemento puede ser:

• caracteres de datos.
• comentarios.
• otros elementos html.

En HTML también existen dos tipos de elementos según el modelo de contenido que pueden manejar:

• elementos con etiquetas de inicio y final. Como por ejemplo: p, div, b, table, span, etc.
• elementos únicos, son elementos que no tienen un elemento de cierre: input, link, meta, img.

El elemento span del ejemplo inicial, es un elemento normal con etiqueta de inicio y final y el contenido que puede manejar un span va entre ambas etiquetas. En cambio un elemento input es un elemento que no puede contener datos y eso se debe a que el elemento input es un elemento único o singular, no está hecho para encerrar texto u otros elementos.

Un elemento <input> está hecho para formularios, y tiene varias formas de presentación como por ejemplo una casilla de verificación, un botón de radio, un control escondido (hidden), un cuadro de texto, password, file, un botón, etc.

Un span no tiene el atributo "value" en cambio un input si lo tiene. He ahí la diferencia del por qué con la propiedad val() de jQuery no se puede establecer un texto para el elemento span.

En jQuery existen formas para asignar texto a un elemento y una de ellas es utilizando el método val(), text() o html(). Lo que caracteriza a cada uno de esos métodos es lo siguiente:

val() ==> Modifica el valor del atributo "value" de todos los elementos que tengan el atributo "value". Los elementos que tienen el atributo value son: input, option, param, button, li.

          Código:
          <input id="inputEjemplo" type="text" value="" />
          $("#inputEjemplo").val("Hola mundo!!!")

          Resultado:
          <input id="inputEjemplo" type="text" value="" />


text() ==> Modifica el valor de contenido que pueden encerrar todos los elementos que poseen etiqueta de cierre. El texto que se asigna es texto plano (text plain) por lo que si esperamos poner texto formateado con color, tamaño, etc, no es posible.

         Código:
         <span id="ejemplo"></span>
         $("#ejemplo").text("<b>Hola mundo!!!</b>")

          Resultado:
          Hola mundo!!!

html() ==> Modifica el valor de contenido que pueden encerrar todos los elementos que poseen etiqueta de cierre. El texto que se asigna puede ser texto plano o texto en formato html.

          Código:
          <span id="ejemplo"></span>
          $("#ejemplo").html("<b>Hola mundo!!!</b>")

          Resultado:
          Hola mundo!!!