viernes, 1 de julio de 2011

Crear nuevos elementos HTML con jQuery

Como cada día utilizo más jQuery y más código de cliente en detrimento de código de servidor, me he dado cuenta que una operación muy habitual es crear elementos HTML para su posterior inserción en algún lugar del árbol del documento. La verdad es que existen distintas formas de crear elementos HTML, ya sea a través de jQuery o bien a través de métodos estándar del DOM.

A continuación, te muestro algunas de las posibles formas que se me ocurren para crear un elemento div:

var div1 = document.createElement("div");

var div2 = $("<div></div>");

var div3 = $("<div />");

var div4 = $("<div>");


La primera forma utiliza el método estándar DOM, mientras que el resto utiliza jQuery. En realidad las llamadas de jQuery utilizan también internamente el método document.createElement. Yo, personalmente prefiero la opción "<div>" que es la más fácil tanto de escribir como de leer.

Seguramente sea Lo más óptimo es utilizar directamente document.createElement, pero prefiero que sea jQuery quién lidie con los métodos del navegador de turno, y yo intentar abstraerme de todo esto, que es justamente por eso por lo que estoy utilizando jQuery.

De hecho, si eres un enamorado de la performance y la optimización es una máxima para ti, puedes ver visitar el siguiente enlace, que tiene un test que compara todas estas opciones distintas de creación de elementos (aunque en mi caso no tengo previsto crear ningún bucle de 10.000 iteraciones creando div, pero bueno…)

Si quieres saber más sobre lo que dice “oficinalmente” jQuery sobre cómo se deben crear elementos al vuelo, puedes visitar http://api.jquery.com/jQuery/#jQuery2

Sea como sea, ahora ya hemos creado el elemento. En realidad esto sólo era el primer paso, después querremos darle contenido, establecer valores para ciertos atributos, etc. Pues bien, de nuevo aquí tenemos distintas opciones:

// Propiedad innerHTML

var div1 = $("<div class='Div2' style='color: White;'>Lorem ipsum</div>");

 

// Métodos jQuery

var div2 = $("<div/>");

div2.addClass("Div2").css("color", "White");

 

// Forma propuesta por jQuery

var div3 = $("<div />",

{

id: "Div3", //atributo directo, igual que si fuéramos con attr(“id”)

"class": "Div3", //class entre comillas porque es una palabra reservada en javascript

text: "Lorem ipsum", //text no es un atributo sino una propiedad de jQuery, por ejemplo: .text("Lorem ipsum")

css: //propiedad de jQuery

{

"font-weight": "bold", "color": "White"

},

click: function (e) { //evento de jQuery

alert("Hola mundo!");

}

});

 

En mi opinión, todas las formas son válidas, pero la tercera me gusta especialmente. De hecho, creo que es la única que merece una explicación porque tiene distintas opciones que deben ser asimiladas.

Por defecto, el nombre de las propiedades que pasamos en el objeto son nombres que utilizaríamos también con el método .attr(“Propiedad”) de jQuery. Así por ejemplo, id sería igual a .attr(“id”). Por otro lado, “class” va entre comillas porque es una palabra reservada del lenguaje, pero a excepción de esto se comportaría igualmente como .attr(“class”). Sin embargo, la propiedad text no es un atributo de un elemento DIV, es decir, no se puede escribir ni <div text=”Lorem ipsum”></div> ni tampoco .attr(“text”), pero funciona. Funciona porque jQuery reconoce text como una palabra especial que hace mención a la propiedad .text() de jQuery, y entonces lo que hemos escrito es equivalente a .text(“Lorem ipsum”). Esto mismo le pasa a css e incluso al manejador de evento para click. Como vemos, esta última opción es muy potente y permite configurar nuestro nuevo elemento de una forma más científica.

Por mi parte nada más, simplemente pensar que a partir de ahora sé un poco más sobre cómo crear elementos HTML con jQuery y no perecer en el intento.

Un saludo!

3 comentarios:

  1. abres un paréntesis en: $("<div/>",{...}
    y ya nunca lo cierras. Es válido eso?

    ResponderEliminar
  2. Gracias por el aviso, ya está solucionado.
    Efectivamente hay que cerrar el paréntesis.
    Es que como copio y pego del editor de código, a veces pierdo "aceite" por el camino ;-)
    Gracias por comentar y un saludo.

    ResponderEliminar