Le tableau résumé de sélecteur de CSS ....
La méthode clone() crée une copie de l'ensemble des éléments html correspondants
Pour cloner un élément à l'aide de jQuery, utilisez la méthode jQuery.clone(). La méthode clone() clonera des éléments DOM appariés et sélectionnera les clones.
Ceci est utile pour déplacer des copies des éléments vers un autre emplacement dans le DOM.
La méthode clone() crée une copie des éléments sélectionnés, y compris le texte, les attributs et les nœuds enfants.
La méthode .clone() effectue une copie de l'ensemble des éléments correspondants, ce qui signifie qu'il copie les éléments correspondants ainsi que tous leurs éléments descendants et les nœuds de texte . Lorsqu'il est utilisé en conjonction avec une des méthodes d'insertion, la méthode .clone() est un moyen commode pour dupliquer des éléments sur une page.
Syntaxe
$(selector).clone(includeEvents)
|
Paramètre |
Description |
|---|---|
|
includeEvents |
Facultatif. Une valeur booléenne qui
spécifie si les gestionnaires
d'événements doivent être
copiés. |
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script >
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p:first").clone(true));
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"});
});
});
</script>
<style>
p{width:200px;}
</style>
</head>
<body>
<center>
<p>Cliquez sur ce paragraphe pour augmenter la taille du texte. Ce gestionnaire d'événement est également copié dans de nouveaux paragraphes</p>
<button>Copier et ajouter dans le body</button>
</center>
</body>
</html>
La méthode .clone() effectue une copie de l'ensemble des éléments correspondants, ce qui signifie qu'il copie les éléments correspondants ainsi que tous leurs éléments descendants et les nœuds de texte . Lorsqu'il est utilisé en conjonction avec une des méthodes d'insertion, .clone() est un moyen commode pour dupliquer des éléments sur une page. Examiner le code HTML suivant :
<div class="container"> <div class="bonjour">Bonjour</div> <div class="aurevoir">Au revoir</div> </div>
Comme pour .append() ou appendTo(), normalement lorsqu'un élément est inséré quelque part dans le DOM, il est déplacé de son ancien emplacement. Ainsi, étant donné le code :
$('.bonjour').appendTo('.aurevoir');
La structure de DOM qui en résulte serait :
<div class="container"> <div class="aurevoir"> Au revoir <div class="bonjour">Bonjour</div> </div> </div>
Pour éviter cela et créer une copie de l'élément, vous pourriez écrire ce qui suit :
$('.bonjour').clone().appendTo('.aurevoir');
Ce qui produirait le résultat suivant :
<div class="container"> <div class="bonjour">Bonjour</div> <div class="aurevoir"> Au revoir <div class="bonjour">Bonjour</div> </div> </div>
Notez que lorsque vous utilisez la méthode .clone() , vous pouvez modifier les éléments clonés ou leur contenu avant leur insertion dans le document.
Par default, les gestionnaires d'événements liés à l'élément d'origine ne sont pas copiées dans le clone. Le paramètre facultatif includeEvents permet de changer ce comportement et plutot faire des copies de tous les gestionnaires d'événements, lié à la nouvelle copie de l'élément.
Par gerywa 25 juillet 2014