El método de clonación en jQuery realiza una copia profunda de un conjunto de elementos coincidentes. Puede crear una copia de los datos, así como una copia de los controladores de eventos.
Sintaxis:
$(selector).clone(true|false)
Valor de los parámetros:
- True especifica que los controladores de eventos también deben copiarse
- Especie falsa (predeterminada) de que los controladores de eventos no deben copiarse.
Ejemplo 1: En este ejemplo, no estamos pasando ningún valor al método de clonación.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
#info {
justify-content: center;
width: 50%;
}
#container {
border: 4px outset red;
background-color: lightblue;
justify-content: center;
width: 50%;
}
#btn {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#info").clone().appendTo("#container");
});
});
</script>
</head>
<body>
<div id="info">
<h4>Clone() method<h4>
<p>
The .clone() method performs a deep
copy of the set of matched elements,
meaning that it copies the matched
elements as well as all of their
descendant elements and text nodes.
</p>
</div>
<button id="btn"> Learn More</button>
<br><br>
<div id="container">
<h3> Result </h3>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, estamos pasando el valor «verdadero» al método de clonación que también copia los controladores de eventos. Aquí estamos cambiando el color de fondo del párrafo cada vez que el usuario hace clic en el párrafo. Esto se copiará como puede ver en la salida.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
body {
background-color: lightblue;
}
#main {
text-align: center;
margin: 20px 300px;
padding: 10px;
background-color: #00b3b3;
display: inline-block;
position: absolute;
}
button {
padding: 20px;
font-size: 30px;
margin-top: 05px;
}
p {
padding: 10px;
font-size: 28px;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("body").append($("p:first").clone(true));
});
$("p").click(function () {
$(this).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<div id="main">
<button id="clone"> Clone </button>
</div>
<p>Clone method example</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA