.clone() | Documentación de la API de jQuery

El método .clone() realiza una copia profunda del conjunto de elementos coincidentes, lo que significa que copia los elementos coincidentes así como todos sus elementos descendientes y nodos de texto.

Nota: Por razones de rendimiento, el estado dinámico de ciertos elementos del formulario (por ejemplo, los datos del usuario escritos en textarea y las selecciones del usuario realizadas en un select) no se copian en los elementos clonados. Cuando se clonan elementos input, el estado dinámico del elemento (por ejemplo, los datos introducidos por el usuario en las entradas de texto y las selecciones realizadas por el usuario en una casilla de verificación) se conserva en los elementos clonados.

Cuando se utiliza junto con uno de los métodos de inserción, .clone() es una forma conveniente de duplicar elementos en una página. Considere el siguiente HTML:

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">Goodbye</div>
</div>

Como se muestra en la discusión de .append(), normalmente cuando un elemento se inserta en algún lugar del DOM, se mueve de su antigua ubicación. Por lo tanto, dado el código:

1	`$( ".hello" ).appendTo( ".goodbye" );`

La estructura DOM resultante sería:

<div class="container">
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Para evitar esto y en su lugar crear una copia del elemento, podrías escribir lo siguiente:

1	`$( ".hello" ).clone().appendTo( ".goodbye" );`

Esto produciría:

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Nota: Cuando se utiliza el método .clone(), se pueden modificar los elementos clonados o su contenido antes de (re)insertarlos en el documento.

Normalmente, cualquier controlador de eventos ligado al elemento original no se copia en el clon. El parámetro opcional withDataAndEvents nos permite cambiar este comportamiento, y en su lugar hacer copias de todos los manejadores de eventos también, vinculados a la nueva copia del elemento. A partir de jQuery 1.4, todos los datos del elemento (unidos por el método .data()) también se copian a la nueva copia.

Sin embargo, los objetos y arrays dentro de los datos del elemento no se copian y seguirán siendo compartidos entre el elemento clonado y el elemento original. Para copiar en profundidad todos los datos, copie cada uno manualmente:

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", ),
 $clone = $elem.clone( true )
 // Deep copy to prevent data sharing

A partir de jQuery 1.5, withDataAndEvents puede ser opcionalmente mejorado con deepWithDataAndEvents para copiar los eventos y datos de todos los hijos del elemento clonado.

Nota: El uso de .clone() tiene el efecto secundario de producir elementos con atributos id duplicados, que se supone que son únicos. Siempre que sea posible, se recomienda evitar la clonación de elementos con este atributo o utilizar en su lugar atributos class como identificadores.

Deja una respuesta Cancelar la respuesta