.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.
Leer másContenido.
Contenido.
El método .clone() de jQuery se utiliza para crear una copia superficial o profunda de los elementos seleccionados. Esto incluye el contenido, los atributos y, opcionalmente, los eventos asociados a los elementos originales. Es útil para duplicar elementos en el DOM sin perder su estructura y atributos.
Definición:
El método .clone() devuelve una copia de los elementos seleccionados. Puedes especificar si deseas clonar los eventos asociados a los elementos usando el parámetro opcional.
Sintaxis:
index.js
JavaScript
$(selector).clone([withDataAndEvents])selector: Un selector de jQuery que selecciona los elementos a clonar.withDataAndEvents(opcional): Un valor booleano (trueofalse). Si se establece entrue, la copia también incluirá los datos de eventos asociados al elemento original. Por defecto, esfalse.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .clone() en jQuery</title>
<style>
.item {
color: blue;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
}
.duplicado {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonClonar").click(function(){
var clon = $("#original").clone(true);
clon.addClass("duplicado");
$("#contenedor").append(clon);
});
});
</script>
</head>
<body>
<button id="botonClonar">Clonar Elemento</button>
<div id="contenedor">
<div id="original" class="item">Elemento Original</div>
</div>
</body>
</html>
index.js
JavaScript
$("#botonClonar").click(function(){
var clon = $("#original").clone(true);
clon.addClass("duplicado");
$("#contenedor").append(clon);
});Explicación del Ejemplo:
En este ejemplo, al hacer clic en el botón con el id “botonClonar”, se clona el div con el id “original”. La opción true en .clone(true) asegura que los eventos asociados al elemento original también se clonen (si hubiera). Luego, se agrega la clase “duplicado” a la copia y se inserta al final del div con el id “contenedor”. Esto crea una copia del elemento original con un estilo diferente.
Resultado.
Elemento Original
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo