oujood.com

jQuery La méthode clone() créer une copie de l'ensemble des éléments html

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.

chercher |

Définition et Usage La méthode clone()

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.

Par défaut valeur = false, les gestionnaires d'événements ne sont pas inclus dans la copie.

Exemple : Comment utiliser la méthode clone() pour copier un élément, y compris les gestionnaires d'événements.

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>

Clones des éléments

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



Voir aussi nos tutoriel :

max-width

Définit la largeur maximale d'un élément

Commentaires de javascript

Commentaires de js : Ici nous verrons comment ajouter des commentaires au code js.

fonction addcslashes, addcslashes

Ajoute des slash dans une chaîne, la mode du langage C