Clonage d'un élément avec la méthode clone()
Bonjour,
Je suis en train de suivre un tutoriel sur jQuery et j'aimerai comprendre un comportement qui parait logique pour l'auteur mais pas pour moi.
J'ai le code suivant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<button id="execute">Cloner</button>
<div id="target">Démo</div>
<div id="container"></div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// clone l'élément identifié en tant que "target"
var $item = $('#target').clone();
// Enlève l'attribut Id au nouvel élément
$item.removeAttr('id');
$('#execute').click(function () {
// Ajoute l'élément à la fin de
// l'élément identifié en tant que "target"
$('#container').append($item);
});
});
</script>
</body>
</html> |
Sur le clic j'ai une deuxième ligne "Démo" qui apparaît.
Ce clic ne fonctionne qu'une seule fois.
Pour que ça fonctionne sur chaque clic, il faut re-cloner l'item de la manière suivante :
Code:
$('#container').append($item.clone());
Pour l'auteur, c'est normal mais il ne donne pas plus d'explications, alors ça doit couler de source.
sauf que j'ai beau me torturer l'esprit :
- Ce n'est pas parce qu'il a oublié la référence à $item après l'exécution du load sinon je ne pourrai pas m'en resservir pour le cloner.
- Ce n'est pas parce que ce n'est pas un contenu HTML mais un objet jQuery car le deuxième appel à clone() renvoie aussi un objet jQuery
- Si je n'enlève pas l'id, ça marche mais ne vois pas ce que fait removeAttr en plus d'enlever l'id.
Bref, ça me torture l'esprit et j'aimerai bien comprendre...
Tentative de démystification
Citation:
@SpaceFrog
Encore une fois, on ne vient pas du même monde.
Comment as-tu deviné qu’il venait de l’espace.
Citation:
Si en JavaScript il n'y a rien de choquant à ce qu'une référence se déplace lorsqu'on l'ajoute ailleurs, c'est choquant en C# ou en Java
Attention on ne parle pas d’emplacement mémoire de l’objet mais de position dans le DOM, connaitre qui est son parent ?
Il est important de connaître également comment fonctionne le DOM pour s’avoir ce que l’on fait.
A lire même quand même : Présentation du DOM
Citation:
"Append" signifiant "Ajouter" et non pas "Déplacer" et encore moins "Attribuer une nouvelle place", je ne m'attends pas à ce comportement..
Prenons l’exemple suivant hors informatique.
J’ai un tableau de mes enfants accroché au mur de mon entrée que l’on pourrait définir comme l’objet MurEntree.tableauEnfants, ce que l’on pourrait traduire de la façon suivante le tableauEnfants est une « propriété » de MurEntree.
Maintenant j’aimerais le mettre au mur du salon, ce que l’on peut exécuter avec MurSalon.append(MurEntree.tableauEnfants). Pour ce faire je l’ai donc décroché du mur de l’entrée, j’ai fait une pause, je suis allé dans le salon, j’ai fais une pause et je l’ai accroché au mur, il y a donc bien eu action de déplacement de l’entrée vers le salon. Le tableau est devenu une « propriété » de MurSalon on a donc maintenant l’objet MurSalon.tableauEnfants.
Ce tableau est maintenant visible dans le salon mais plus dans l’entrée.
Seulement voilà après réflexion, oui je ne sais pas ce que je veux, je me dis que j’aimerais l’avoir également dans l’entrée, décidément il me plait vraiment, mais comment faire ?
J’ai une solution, en faire une copie, ce que l’on peut réaliser en faisant copieTableauEnfants = MurSalon.tableauEnfants.clone(), j’ai donc un objet copieTableauEnfants qui est en stock mais non visible pour l’instant.
Maintenant que j’ai un nouveau tableau, une copie identique à l’original, je peux l’accrocher au mur de l’entrée avec une instruction MurEntree.append(copieTableauEnfants) qui devient donc l'objet MurEntree.copieTableauEnfants.
La différence maintenant est que ce tableau est visible dans l’entrée mais aussi dans le salon.
Tu l’auras compris les différents murs sont les éléments visibles de ta page web.
La méthode jQuery.append() est le pendant javascript de element.appendChild.
Citation:
Après en avoir discuté avec eux, ils m'ont vivement invités à souligner cette différence dans le support que je rédige.
Perso je vous invite à la lecture de la documentation officielle de la bibliothèque, c’est quand même le meilleur moyen de ne pas faire de confusion entre les différentes méthodes mises à disposition, d’autant que celle de JQuery possède de nombreux exemples.
