Clonar elementos con jQuery

Explicamos como crear una copia al carbón de un conjunto de elementos y utilizarla dentro de nuestro DOM

En artículos anteriores tuvimos la oportunidad de analizar una serie de métodos para poder eliminar, añadir, modificar y establecer contenido mediante la manipulación del DOM de nuestro sitio, es ahora que nos corresponde estudiar un nuevo método de operación que nos permite fijar la copia de un elemento al resto del árbol que estructura nuestro sitio.

jQuery nos ofrece un método muy práctico y bastante sencillo par a poder lograr el envolvimiento del elemento y llevar a cabo la llamada “clonación” que prácticamente consiste en establecer una copia del elemento que en cuestión fue envuelto, todo para poder trabajar con ella sin afectar en absoluto al elemento original.

Función clone() de jQuery

Lo primeo que debemos definir es la función del comando “clone()”, este método se encargará de crear copias de los elementos que fueron envueltos y añadidos al conjunto mediante un selector.

Para poder llevar a cabo esto basta con llamar el comando después de la función jQuery que envuelve al conjunto. Esta función por lo general es utilizada sin parámetros, pero puede recibir en caso de que se quieran manejar “handlers”, si es así tendremos que mandar como parámetro el valor booleano “true” y de esta manera también se copiaran los controladores de eventos, si no se manda ningún parámetro por defecto se toma como “false”.

Finalmente la función nos retornará un nuevo conjunto de elementos envueltos, donde todos los elementos e hijos del conjunto original fueron copiados y establecidos

Utilidad de clonar elementos con jQuery

Hacer una copia de los elementos existentes con “clone()” no es nada útil hasta que hagamos algo con esa copia al carbón. Por lo general, una vez que hemos logrado la clonación, y tenemos un nuevo conjunto envuelto con las copias, otro comando de jQuery entra en acción para poder agregar dichos elementos al DOM del sitio.

Es aquí donde hay que recordar lo visto en el anterior tema de este manual de jquery, la función “appendTo()” será la encargada de ayudarnos a añadir los elementos. Por ejemplo:

jQuery('img').clone().appendTo('fieldset.fotos');

Esta declaración hace copias de todos los elementos de tipo imagen que existen en el sitio y los añade a un “fieldset” creado con la clase “fotos”. Un ejemplo un poco más complejo puede ser el siguiente:

jQuery('ul').clone().appenTo('#divLista');

Con esta sentencia estamos realizando una operación similar a la anterior, pero con la diferencia de que en esta ocasión los objetivos de clonación son de tipo “ul”, es decir listas desordenadas, por lo que al momento de clonarlos copiaremos tanto a los elementos padres como a los hijos, los cuales son representamos mediante la etiqueta “li”. Finalmente esa lista será añadida en un div contenedor que lleva por ID la palabra “divLista”.

Podemos agregar un último ejemplo para observar el comportamiento de este comando en combinación con otras funciones, si tenemos una sentencia como la siguiente:

jQuery('ul').clone().appendTo('#divLista').end().hide();

Con esto llevaremos a cabo la misma operación que en el ejemplo anterior, pero después de la inserción de los clones, utilizamos el comando “end()” para seleccionar el conjunto envuelto original (los objetivos originales) y finalmente esconderlos mediante el comando “hide()”. Esto se puede utilizar para darle énfasis a la creación de los clones, demostrando que es un nuevo conjunto envuelto, o simplemente para dar la impresión de traslado.

Conclusión

Ahora que ya hemos discutido durante varios temas el manejo general de los elementos DOM, pasarmos a echar un vistazo al manejo de un tipo especial de elemento, los formularios. En los siguientes artículos del manual empezaremos a ver como aplicar funciones de jQuery a estos elementos que son parte fundamental de todo sitio web.