Trabajando con elementos en jQuery: Generar HTML

En algunas ocasiones podemos encontrarnos con la necesidad de generar nuevos fragmentos de código HTML, los cuales queremos que sean insertados en nuestra página Web de manera dinámica. Ya sea que lo hagamos por cuestiones de estética o practicidad, esta función nos puede llevar varias líneas de código y tiempo invertido si no conocemos una manera adecuada de realizarlo.

Con jQuery, crear elementos HTML se convierte en algo fácil y sencillo de resolver, como pudimos aprender en la serie de “Fundamentos de jQuery”, esta librería cuenta con lo necesario para crear elementos HTML con el simple uso de la función jQuery() o su alias $(). Supongamos que tenemos la siguiente expresión:

jQuery("<div>Esto es un div</div>")

Con ella creamos un nuevo elemento “div” que estará listo para ser añadido a nuestro documento y conformar una nueva parte de la página Web, ahora podremos correr y aplicar sobre esta expresión cualquier comando de jQuery que funcione sobre un conjunto de elementos envueltos. Esto puede lucir como algo muy insignificante y no impresiona a nadie a simple vista, pero al momento de adentrarnos más en el funcionamiento, manejar eventos, Ajax y efectos, veremos que es de gran utilidad.

También podemos considerar el uso de atajos en estas instancias. Supongamos que deseamos crear un elemento “div” vacío, inicialmente nuestra lógica nos dice que debemos definir algo como:

jQuery("<div></div>");

Como podemos ver fue bastante sencillo y usamos la misma síntaxis que en el primer ejemplo, pero como el div que estamos creado en esta ocasión se encuentra vacío, basta con usar su versión más corta para definirlo:

jQuery("<div>");

Con estas declaraciones ya tenemos nuestro “div” creado, pero para poder trabajar con él en jQuery esta creación debe ser añadida al DOM, igual que en Javascript. La sentencia jQuery(‘

por sí mismo no está integrada al DOM de nuestro sitio, por lo que se tiene que adjuntar a algún otro elemento que ya se encuentre en el DOM, y esto lo lograremos usando algún método como “append” o “prepend”.

En esta lista podemos observar las cuatro formas en las que podemos crear un “div” mediante jQuery:

jQuery( document.createElement('div') );
jQuery('<div>');
jQuery('<div></div>');
jQuery('<div/>');

Son relativamente parecidas, y la única variación que se puede encontrar es que algunas tardan menos en cargarse que otras, pero es cuestión de milesímas de segundo, la forma que tú decidas usar no afectará la aplicación o funcionamiento de la librería en tu código.

Ejemplo de creación de elementos HTML con jQuery

La creación de elementos HTML es de verdad muy sencilla y de gran ayuda, pero como en todo, existen pequeños inconvenientes que debemos tener en cuenta.
Hay que aclarar que no podemos utilizar esta técnica para crear elementos “script”, puesto que si lo hacemos su funcionamiento no sería totalmente fiable y aunque existen muchas otras técnicas para manejar esta clase de situaciones, debe ser recomendado definir los elementos script de manera independiente.

Para darnos una idea lo que podremos hacer en un futuro, continuando este curso, veamos este ejemplo. No te preocupes si no entiendes alguna parte del código, recuerda que vamos paso a paso y esto es solo un ejemplo para ver el potencial de jQuery:

   jQuery("<div class='seccion'>Esto es un div de sección</div><div>Este no lo es</div>")
     .filter(".seccion").click(function() {
       alert("Soy una sección!");
     }).end().appendTo("#divPadre");

Lo primero que hacemos en este fragmento de código es crear dos elementos “div”, uno con una clase “seccion” y el otro sin ella, después enfocamos la selección unicamente al div que pertenece a la clase “seccion” y la enlazamos con un método de jQuery que se activará cuando el usuario haga clic sobre dicho “div”. Por último, se utiliza el método “end” para poner fin a la más reciente operación de filtrado y devolver el conjunto de los elementos coincidentes a su estado anterior, para finalmente adjuntarlos al elemento con el identificador “divPadre”.

Conclusiones

Como podemos observar en unas cuantas líneas de código, en una sola instrucción, hicimos bastante. Esto nos demuestra que podemos obtener mucho a cambio sin necesidad de escribir un montón de secuencias de comandos. En los siguientes artículos empezaremos a estudiar el manejo de los elementos que han sido envueltos por la función jQuery.