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.

search |

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.

Sélectionner 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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction str_shuffle, str_shuffle

M lange les caractères d'une chaîne de caractères

right

Définit le bord de la marge droite d'une boîte placée

fonction stripslashes

Supprime les antislashs d'une chaîne



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci