Establecer el contenido del elemento con jQuery

En este artículo explicamos como modificar y establecer el contenido de un elemento mediante las fucniones "html()" y "text()" de jQuery

Una de las grandes ventajas de manejar jQuery como framework principal de Javascript, es que nos ofrece una amplia gama de opciones para realizar las actividades que comúnmente son requeridas al momento de llevar a cabo la creación y mantenimiento de un sitio Web, y no hay excepción que incumpla esta condición al momento de referirnos a la modificación del contenido de elementos.

Si bien en este artículo nos enfocaremos en el establecimiento de contenido mediante el uso de jQuery, hay que mencionar que existen opiniones divididas y encontradas cuando tratamos el tema de modificar el contenido. El debate se centra en encontrar cual es la mejor técnica para realizar esta actividad, por un lado existen personas que indican que los métodos DOM API (createElement, setAttribute, etc.) son los mejores, y hay quienes asegurar que modificar directamente el HTML es lo mejor, lo cierto es que esta última opción es más fácil y eficaz, por lo que jQuery no ofrece una serie de métodos para hacerlo.

Sustitución del HTML con jQuery

El primer método para llevar a cabo la modificación del contenido de un elemento, es la función “html()” en su forma más simple. Básicamente esta función, como casi todos los demás métodos en jQuery, tiene distintas formas de ser llamada y en base a la manera en que se llame actuará.

Cuando la función “html()” es mandada llamar sin proporcionar parámetros, esta se encarga de obtener únicamente el contenido HTML de un elemento y de esa manera poder trabajar con él. Este tipo de funcionalidad es idéntica a la proporcionada por la propiedad “innerHTML” de Javascript nativo, por lo que los valores devueltos son iguales.

Si tuvieramos un código como este:

<div id="divPrueba">
<span>Hola Mundo</span>
</div>

Y aplicaramos en nuestro código jQuery la función de la siguiente manera:

jQuery("#divPrueba").html();

Lo que obtendríamos como resultado sería la siguiente cadena “Hola Mundo”, pero como se puede observar también nos trajo las etiquetas HTML “span” ya que ese es el contenido del elemento que mandamos llamar.

La segunda forma de manejar la función “html()” consiste en mandar un parámetro, el cual puede ser un texto plano o un conjunto de etiquetas html, dicho texto se va utilizar para establecer un nuevo contenido y se va a establecer en todos los elementos coincidentes.

Su implementación es bastante sencilla, una vez obtenidos los elementos deseados mediante un selector y de mantenerlos juntos en el conjunto envuelto mediante la función jQuery, basta con llamar al método “html()” y proporcionar un nuevo texto como parámetro, para que el contenido de dichos elementos cambie por completo y sea sustituido por el texto que se envió, obteniendo como resultado final un nuevo conjunto envuelto.

Sustitución del texto con jQuery

Si lo que queremos es cambiar u obtener únicamente el texto de un elemento y no toda su estructura HTML, podemos utilizar la función “text()” como alternativa.

Esta función tiene un comportamiento bastante similar a “html()”, puesto que también tiene dos formas distintas de utilizarse y las dos tienen una estructura muy parecida en sus opciones.

El comando “text()” cuando se utiliza sin parámetros nos va a regresar una cadena que representa la concatenación de todos los textos de los elementos que coinciden con el selector proporcionado. Por ejemplo, si suponemos que tenemos un fragmento HTML como el siguiente:

<ul id="listaPrueba">
<li>Elemento Uno</li>
<li>Elemento Dos</li>
<li>Elemento Tres</li>
<li>Elemento Cuatro</li>
</ul>

Y queremos obtener el texto de todos los elementos que se encuentran dentro de la lista cuyo id es “listaPrueba”, basta con establecer una declaración como la siguiente:

var textoLista = jQuery("#listaPrueba").text();

Así cuando mandemos llamar a la variable “textoLista” obtendremos que su valor es “Elemento UnoElemento DosElemento TresElemento Cuatro” porque es la concatenación de todos los textos contenidos en los elementos “li” de la lista.

También podemos usar el comando “text()” para definir el contenido del texto de los elementos envueltos. La sintaxis de este formato es bastante conocida, simplemente mandamos como parámetro el contenido a insertarse y este se va a incluir en todos los elementos que coinciden y se encuentran en el conjunto. Hay que aclarar que en caso de que el texto a insertar contenga paréntesis angulares (> mayor que y < menor que), estos serán reemplazados por su equivalente en HTML.

Conclusión

Hay que tener en cuenta que el establecimiento de un nuevo HTML o texto interno en los elementos mediante el uso de estos comandos va a reemplazar por completo el contenido que existía previamente, así que hay que saber utilizar estos comandos de manera adecuada y cuidadosa. Si lo que tú buscas es no modificar todo el contenido previo en el elemento, entonces hay otra clase de métodos que te pueden servir mejor, estas funciones consisten en modificar el contenido dejando lo anterior, pero eso lo veremos en el siguiente artículo.