Hasta este punto el curso hemos aprendido lo suficiente como para entender hasta donde puede llegar la magnitud de la función jQuery() y su alias $(), los creadores de jQuery se encargaron de crear con ella una función lo bastantemente versátil como para poder evitar la introducción de una gran serie de variables globales y demás nombres específicos en el entorno de JavaScript.
Gracias a esta función hemos podido llevar a cabo muchas de las operaciones y deberes que hasta hoy son la base de toda la librería, hemos visto como utilizar métodos mediante su llamada, la hemos utilizado como prefijo y como método de ejecución al cargarse nuestro documento, esta vez analizaremos una tarea más, la de crear elementos DOM.
La función jQuery acepta varios tipos datos como parámetros, no siempre se debe emplear un selector CSS como arma para afrontar el problema, muchas veces podemos recurrir a los propios elementos DOM e incluso a un arreglo de dichos elementos para manejar eventos, según lo que deseemos realizar será lo que enviaremos. En el caso de esta tarea en específico, debemos pasar como parámetro una cadena que contenga el código HTML relacionado al elemento que queremos crear.
Si suponemos que se desea crear una capa “div” que contenga un nuevo párrafo en nuestro documento, el código de creación deberá lucir de la siguiente manera:
jQuery("<div id='nuevoDiv'><p id='nuevoParr'>Este es mi nuevo párrafo</p></div>");
Como se puede observar únicamente escribimos un par de etiquetas con sus “Id” relacionados dentro de la ya mencionada función jQuery(). Aunque para efectos prácticos este código no tendría ninguna utilidad, ya que no esta incorporado al conjunto que se muestra en nuestro sitio, el elemento esta creado y este es el primer paso para integrarlo con el resto de la vista del sitio.
Para darle la utilidad mencionada a nuestro código y poder integrarlo de manera completa a la interfaz del sitio Web, debemos hacer uso de alguna de las funciones que jQuery nos proporciona para manipulación del DOM. Existen varias funciones relacionadas a esta actividad, entre las más importantes encontramos “append”, “prepend”, “insertAfter” e “insertBefore”, que nos permiten agregar elementos en diferentes partes del documento.
Vale aclarar que en este artículo aún no analizaremos a fondo ninguna de estas funciones, pero basta con mencionar su uso para empezar a comprenderlas. Vamos a examinar el siguiente código:
<html>
<head>
<title>Elementos DOM</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("<div id='nuevoDiv'><p id='nuevoParr'>Este es mi nuevo párrafo</p></div>").insertBefore("#viejoDiv");
});
</script>
</head>
<body>
<div id='viejoDiv'>
<p id='viejoParr'>Este es mi párrafo viejo</p>
</div>
</body>
</html>
En el ejemplo establecemos una estructura HTML, en cuyo cuerpo encontramos un div identificado como “viejoDiv” el cual a su vez contiene al párrafo “viejoParr”, dentro de la sección “head” llamamos a la rutina ready y una vez cargado el documento mandamos crear el elemento DOM anteriormente visto, con la diferencia que en esta ocasión utilizamos una llamada al método “insertBefore” el cual se encargará de insertar dicho elemento antes del “viejoDiv”.
Con el resto de las funciones de manipulación obtendríamos un resultado similar, aunque en distintas partes del documento, si hubiéramos utilizado la función “insertAfter” el elemento hubiera sido integrado después de la capa “viejoDiv”, en artículos posteriores estudiaremos el resto de los métodos de manipulación que nos permitirán modificar el DOM y agregar elementos en una estructura.
Conclusión
Ahora que hemos visto la sintaxis básica para manejar jQuery, estamos listos para comenzar a utilizar herramientas más poderosas, en los siguientes artículos echaremos un vistazo a algunas de las características de la librería.
modificado el 8 marzo, 2018 16:42