Clonage d'un élément avec la méthode clone()

**popo** · 07/06/2018, 15h40

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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...

**popo** · 07/06/2018, 16h18

Pour ceux qui se poseraient la même question (s'il y en a)

Je viens de trouver un semblant de réponse sur un autre tutoriel que j'avais téléchargé mais que j'avais mis de coté car écrit en allemand.
Ne me demandez pas d'adresse, je suis incapable de la retrouver.

Bref, j'ai trouvé ce petit laïus :

Der Grund dafür ist, wie JavaScript Parameter übergibt. Wenn Sie mit einem Objekt arbeiten, übergibt JavaScript einen Verweis auf das Objekt, keine Kopie des Objekts. Dies würde bedeuten, dass wir einen Zeiger auf den zuvor erstellten Klon hinzugefügt haben, keine brandneue Kopie. Das Endergebnis ist, dass wir, wenn wir clone () nicht ein zweites Mal aufrufen würden, versuchen würden, das exakt gleiche Objekt erneut in den Container einzufügen, nicht eine brandneue Kopie. Durch erneutes Aufrufen von clone () übergeben wir eine Kopie unseres Benutzerformulars und nicht einen Zeiger auf den, den wir bereits verwendet haben.

En gros, ça dit que puisque javascript transmet les objets par référence, mon conteneur contient déjà un pointeur sur ce que je souhaite ajouter et rejette donc ce nouvel ajout.
Il faut donc forcer une nouvelle copie pour avoir un autre pointeur qui lui sera accepté.

Etant habitué à Delphi et au C#, j'ai du bien du mal à saisir ce concept car dans ces langages j'aurais bien mes deux ajouts pointant sur la même adresse.

**NoSmoking** · 07/06/2018, 19h39

Bonjour,
regarde la réponse faite dans cette discussion : Dupliquer une div dans une autre.

**popo** · 08/06/2018, 11h24

Envoyé par NoSmoking

Bonjour,
regarde la réponse faite dans cette discussion : Dupliquer une div dans une autre.

La discussion contient cette petite note (la tienne d'ailleurs).

Envoyé par NoSmoking

Il faut que tu comprennes que var $tr = $(".tbltr").clone() te fais une copie de l'élément et que lorsque tu fais $tr.appendTo("#tbljours") tu déplaces la copie donc ... et ... les fois suivantes tu redéplaces cette copie, de là où elle est vers là où elle est, et ainsi de suite.

Je ne comprenais toutefois pas pourquoi tu parlais de déplacement.
La méthode n'est-elle pas sensée ajouter un élément ?

J'ai donc fait un petit test rapide :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    <button id="execute">Cloner</button>
    <div id="target">Démo</div>
    <div id="container">TEST</div>
 
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
 
    <script>
 
        $(function () {
            $('#execute').click(function () {
                $('#container').append($('#target'));
            });
 
        });
 
    </script>

Et ma cible n'est pas ajoutée au conteneur, elle est déplacée

C'est fourbe comme comportement, il aurait fallu nommé cette méthode "move()"

A bien y réfléchir, il n'y aurait aucune raison à la présence d'une méthode "clone()", s'il s'agissait d'un ajout comme j'ai l'habitude d'en voir en Delphi ou en C#.

En tout cas j'ai ma réponse.
Merci NoSmoking

**SpaceFrog** · 08/06/2018, 16h31

Il n'y a rien de fourbe...
Si tu l'appendes ailleurs, il se déplace.
Si tu veut le cloner il faut utiliser clone() qui créé une copie.

append sert a attribuer une place dans le flux.

il est donc logique de créer un élement du DOM puis de le placer dans le flux .
SI tu ne le créées pas avant mais que tu pointes sur un element présent sur la page et que tu l'appendes, tu lui attribues une nouvelle place dans le flux.

**popo** · 13/06/2018, 09h47

@SpaceFrog

Encore une fois, on ne vient pas du même monde.
Si je me fie à tes propos, j'ai tout lieu de penser que tu as fait du JavaScript toute ta vie et n'as jamais essayé des langages comme C# (ou Java dont est pourtant inspiré JavaScript).

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.
Dans ces langages, tu aurais la même référence à deux endroits avec les problèmes que ça peut engendrer.

Dans un registre plus global, je m'attends à ce que le nom d'une méthode reflète son comportement.
"Append" signifiant "Ajouter" et non pas "Déplacer" et encore moins "Attribuer une nouvelle place", je ne m'attends pas à ce comportement.

Pour la petite histoire, j'expérimente jQuery et par extension JavaScript dans le but de reprendre un projet et je vais devoir former mes collaborateurs suite à mon expérience.
Après en avoir discuté avec eux, ils m'ont vivement invités à souligner cette différence dans le support que je rédige.
Je prends donc note qu'il s'agit d'un comportement "logique" pour JavaScript et mettrai en évidence cette différence.

Clonage d'un élément avec la méthode clone()

jQuery

Vue hybride

Discussions similaires

Partager

Partager