IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut 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 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...

  2. #2
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    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.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 106
    Points : 44 916
    Points
    44 916
    Par défaut
    Bonjour,
    regarde la réponse faite dans cette discussion : Dupliquer une div dans une autre.

  4. #4
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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).
    Citation 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

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    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.

  6. #6
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    @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.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 106
    Points : 44 916
    Points
    44 916
    Par défaut Tentative de démystification
    @SpaceFrog
    Encore une fois, on ne vient pas du même monde.
    Comment as-tu deviné qu’il venait de l’espace.


    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


    "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.


    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.

  8. #8
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Lorsqu'on parle de pointeur et de passage par référence, j'ai vraiment du mal à concevoir qu'on ne parle pas d'adresse mémoire.

    D'ailleurs à moins que je dise une énorme connerie, le DOM n'est il pas seulement une représentation mémoire de la structure du document ?
    Sinon ça voudrait dire qu'à chaque modification du DOM, le fichier serait physiquement modifié.

    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.
    Justement je l'ai lue.
    En tout cas, j'ai lu celle-ci : https://developer.mozilla.org/fr/doc...de/appendChild
    Et il est explicitement dit que l'élément est déplacé et que la conséquence est qu'on ne peux pas avoir deux fois le même éléments.
    Ce n'est pas la même chose que de dire qu'on ne peux pas avoir deux fois le même élément et que c'est pour ça qu'on le déplace.

    Autrement dit, ce comportement n'est pas la conséquence d'une contrainte, il est intentionnel.
    Ce qui est confirmé par, je cite : "(il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre)".
    Ce que je traduis par ""Normalement tu devrais supprimer le nœud puis le recréer ailleurs, mais je vais le faire pour toi et donc je vais procéder à un déplacement plutôt qu'un ajout même si ça contredit le terme 'appendChild'".

    Au risque de passer pour un con ou une tête de mule, je ne comprend toujours pas pourquoi cette méthode s'appelle appendChild alors que ça déplace l'élément
    Surtout qu'il existe une méthode removeChild pour retirer un élément.
    Et donc, je persiste à dire que c'est fourbe et que ceci aurait été beaucoup plus clair :
    - appendChild pour ajouter
    - removeChild pour enlever
    - moveChild pour déplacer

  9. #9
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Ta traduction du mot Anglais « Append » est fausse.
    Bien sur tous les dictionnaire du monde te proposeront le mot ajouter, mais si tu lis un peu plus loin, on peut aussi traduire ce mot anglais par le terme Français apposer.

    En réalité, et pour ce terme, le champs sémantique de ce terme Anglais est plus vaste, sans oublier qu’en Anglais, les syntaxes peuvent être inversées.
    Exemple «I miss you » se traduit par « tu me manques ».

    Ce qui est un peu l’idée ici, l’instruction jQuery $(‘#A’).append(‘#B’), ne signifie pas 'copier' l’élément B dans l’élément A, mais apposer l’élément B dans l’élément A.


  10. #10
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Dans la mesure ou "apposer" signifie : "Appliquer quelque chose sur quelque chose" (définition officielle du Larousse), je ne vois pas ce que ça change.
    L'autre définition de "apposer" étant "Inscrire une signature, une marque, etc., sur un document", elle n'a donc rien à voir.

    Je suis OK pour admettre que puisqu'il existe des méthodes commençant par "add" et que celle-ci commence par "append", on peut effectivement en déduire une différence de comportement.
    Mais ça reste quand même ambigu surtout quand la documentation officielle commence en premier lieu par te parler d'ajout.

    J'accepte donc cette réponse pour expliquer le comportement de appendChild.
    Mais je persiste à dire que ça aurait été plus clair si elle s'était appelée move().

    Tu vas me certainement me répondre "Qu'en-est-il de appendTo() ? On n'aurait pas pu l'appeler moveTo() car une autre méthode porte déjà ce nom...".
    Dans la mesure où moveTo() prend des coordonnées, elle aurait pu être nommée moveAt().
    Et si la différence entre moveTo() et moveAt() peut également paraître ambiguë , alors pourquoi pas "shift" et "shiftTo" (cette notion de décalage illustre parfaitement le changement de position dans le DOM).

    Edit :
    Rien à voir avec le sujet mais cette section du forum n'est pas simple à retrouver.
    Ce serait bien de rajouter un bouton dans le menu en haut de la page.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 106
    Points : 44 916
    Points
    44 916
    Par défaut
    D'ailleurs à moins que je dise une énorme connerie, le DOM n'est il pas seulement une représentation mémoire de la structure du document ?
    Sinon ça voudrait dire qu'à chaque modification du DOM, le fichier serait physiquement modifié.
    Le DOM est la représentation du document sous forme d’objets JavaScript.

    Lors de l’interprétation de la page le DOM est construit parallèlement à cette interprétation, chaque balise a son objet JavaScript associé qui lui est affecté des propriétés propres à cet objet et enrichi/modifié de celles que l’on pourrait trouvées dans les attributs de chacune des balises.

    Il en résulte ce que l’on appelle l’arbre DOM qui va nous permettre de parcourir, retrouver et modifier un élément.

    Le JavaScript permet de modifier le DOM et dans ce cas le moteur de rendu va modifier l’affichage mais pas le fichier initial.

    Les modifications effectuées ne sont que temporaires et disparaissent au chargement de la page à partir du cache du navigateur ou du serveur. Elles n’influent nullement sur le fichier qui conserve son intégrité.

    La différence est visible en faisant un CTRL +U pour afficher la source du document, et en regardant dans la console F12 dans l’onglet Inspecteur/éléments.


    je ne comprend toujours pas pourquoi cette méthode s'appelle appendChild alors que ça déplace l'élément
    En fait tout ce passe en mémoire, appendChild() relit un élément à un autre élément, si l’élément relié à déjà un parent il est effectivement d’abord supprimé (remove) de la liste des enfants de son parent actuel (childNodes) avant d’être ajouté à la fin de la liste des enfants de son nouveau parent, cela se passe donc en mémoire par la modification de l’arbre du DOM, il n’y a que son « pointeur » sur le parent (parentNode) qui change, c’est la même chose pour removeChild().

    Je saisie ton trouble quant à la notion de move mais elle est plutôt consacré, dans le cas du web, à un déplacement physique à l’affichage, sur l’écran.

    https://dom.spec.whatwg.org/#concept-node-append (suivre les liens des définitions)


    Rien à voir avec le sujet mais cette section du forum n'est pas simple à retrouver.
    Ce serait bien de rajouter un bouton dans le menu en haut de la page.
    Tu peux rapidement retrouver tes discussions en allant dans ton Tableau de bord -> Mes abonnements

  12. #12
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Citation Envoyé par popo Voir le message
    Dans la mesure ou "apposer" signifie : "Appliquer quelque chose sur quelque chose" (définition officielle du Larousse), je ne vois pas ce que ça change.
    Sauf que tu continue à vouloir comprendre un mot Anglais avec une logique Française.
    Au passage, je te signale que les Anglais n'utilisent pas le Larousse en Français pour comprendre les mots de leur vocabulaire .

    Pour les Anglais, l’utilisation de append dans $(‘#A’).append(‘#B’) ne pose aucune ambiguïté dans leur esprit.

    En revanche si les devs de jQuery avaient orthographié $(‘#A’).move(‘#B’) cela n’aurait eu aucun sens, et même prêté à confusion ( - vers ou bouger l’élément A ? - en utilisant les propriétés de B? => c’est complètement absurde ! ).

    Dis toi que c’est simplement un problème de traduction :
    1) les termes d’une Langue X vers une Langue Y n’ont pas toujours une correspondance directe,
    2) les règles syntaxiques d'une Langue X peuvent être différentes (ou ne pas exister) dans une Langue Y
    Ce qui est le cas ici pour les 2, (Ce sont aussi 2 des concepts de base si on veut progresser dans l’apprentissage d’une langue étrangère).

    Les dictionnaires de traduction ne proposent que les meilleurs approximations possibles et générales, il est inutile d’y chercher une vérité absolue.

    D’ailleurs nombre de termes Français peuvent être ambigus à comprendre pour un étranger (et parfois aussi pour les Français eux-mêmes).

  13. #13
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    Citation Envoyé par popo Voir le message
    Au risque de passer pour un con ou une tête de mule, je ne comprend toujours pas pourquoi cette méthode s'appelle appendChild alors que ça déplace l'élément
    Surtout qu'il existe une méthode removeChild pour retirer un élément.
    Et donc, je persiste à dire que c'est fourbe et que ceci aurait été beaucoup plus clair :
    - appendChild pour ajouter
    - removeChild pour enlever
    - moveChild pour déplacer
    Tes arguments me parlent. J’avoue que je ne m’étais jamais posé la question… Ça fait partie de ces fonctions qu’on utilise tellement souvent qu’on en oublie la signification de leur nom. Comme si le nom était juste une adresse pointant vers un emplacement compilé dans ma tête.

    Pour ajouter mes deux centimes, je pense que la logique du DOM est qu’un nœud n’est jamais cloné implicitement. Il faut exprimer son intention de copier un élément en appelant .cloneNode(), et même là, si on ne passe pas true, seul l’élément lui-même est cloné, pas ses descendants. Du coup, par défaut, les méthodes qui permettent de déplacer un nœud, eh bien, le déplacent, et ne le copient pas. Il disparaît de sa position précédente.

    Je suis d’accord avec toi sur le fait que c’est un effet de bord et que ce n’est pas annoncé par le nom de la méthode Mais après tout, des APIs incohérentes, on en a vu d’autres… C’est toi que je regarde, PHP

  14. #14
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Citation Envoyé par psychadelic Voir le message
    Sauf que tu continue à vouloir comprendre un mot Anglais avec une logique Française.
    Au passage, je te signale que les Anglais n'utilisent pas le Larousse en Français pour comprendre les mots de leur vocabulaire .

    Pour les Anglais, l’utilisation de append dans $(‘#A’).append(‘#B’) ne pose aucune ambiguïté dans leur esprit.

    En revanche si les devs de jQuery avaient orthographié $(‘#A’).move(‘#B’) cela n’aurait eu aucun sens, et même prêté à confusion ( - vers ou bouger l’élément A ? - en utilisant les propriétés de B? => c’est complètement absurde ! ).

    Dis toi que c’est simplement un problème de traduction :
    1) les termes d’une Langue X vers une Langue Y n’ont pas toujours une correspondance directe,
    2) les règles syntaxiques d'une Langue X peuvent être différentes (ou ne pas exister) dans une Langue Y
    Ce qui est le cas ici pour les 2, (Ce sont aussi 2 des concepts de base si on veut progresser dans l’apprentissage d’une langue étrangère).

    Les dictionnaires de traduction ne proposent que les meilleurs approximations possibles et générales, il est inutile d’y chercher une vérité absolue.

    D’ailleurs nombre de termes Français peuvent être ambigus à comprendre pour un étranger (et parfois aussi pour les Français eux-mêmes).
    OK, utilisons donc les dictionnaires Officiels des anglais :
    Pour le Cambridge Dictionary :
    - Append in english : to add something to the end of a piece of writing (The author appends a short footnote to the text explaining the point)
    - Append in american : to add something to the end of a piece of writing (Several footnotes were appended to the text)
    Pour le Oxford Dictionary :
    Append = Add (something) to the end of a written document. (the results of the survey are appended to this chapter)

    Et lorsque tu recherche les méthodes append dans l'informatique en général tu retrouve ce terme pour python, C#, Java, Ruby, PHP (Spécial dédicace à Watilin), etc.
    Et la définition est toujours la même : Ajoute à la fin.
    Il n'y a qu'avec JavaScript que cette définition est : Ajoute à la fin sauf si tu as déjà un élément identique.

    Quant à l'absurdité, je ne vois pas où elle est.
    Si pour un dev "$(‘#A’).append(‘#B’)" signifie "append B in A" alors "$(‘#A’).move(‘#B’)" signifie "move B in A".

  15. #15
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Citation Envoyé par popo Voir le message
    Quant à l'absurdité, je ne vois pas où elle est.
    Si pour un dev "$(‘#A’).append(‘#B’)" signifie "append B in A" alors "$(‘#A’).move(‘#B’)" signifie "move B in A".
    Non, j'ai posé la question à quelques Anglais autour de moi, et la fonction append telle qu'elle est ne les choque pas le moins du monde...

    Sauf pour le "$(‘#A’).move(‘#B’)" qui, comme pour moi, leur semble absurde, car dans cette construction le move se réfère à l'objet A et non à l'objet B comme tu le voudrait.
    Quand au fait de donner B comme argument d'un déplacement de l'Objet A, cela leur semble vraiment incongru, car justement, c'est un objet, pas un argument..

    Mais ça devient amusant, tu as l'air d'être complètement arc-bouté sur ta vision/compréhension, et tu veux qu'elle soit établie comme une vérité absolue et universelle.... (j'espère que tu en ris aussi )

    A la limite tu devrai essayer d'écrire à Google tes remarques (et tu peux y joindre les miennes), je serai curieux de connaître leur réponse éventuelle..

    https://forum.jquery.com/

  16. #16
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Sinon, j’ai été rechercher dans mon vieux dictionnaire Harraps (traductions FR /UK – UK FR),
    et je te livre ici l’intégralité de leur définition :

    append [ɘ’pend ]. v.tr.
    (a) : attacher, joindre (qch. à qch.). esp.
    (b) : To a. a signature to a document, apposer une signature sur un document.
    To a. a document, to a dossier, annexer un document à un dossier.
    To a. notes, ajouter des notes.

    esp. => Especially == Surtout


    ___

    Et comme l’écrit NoSmoking dans l’instruction "$(‘#A’).append(‘#B’)", #A et #B sont bien des éléments réels à l’intérieur du DOM de ton navigateur.
    Il ne saurait être question de cloner automatiquement l'élément #B, car cela induirait forcément un conflit car on se retrouverai avec 2 objets ayant un même identifiant.

  17. #17
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Citation Envoyé par psychadelic Voir le message
    Non, j'ai posé la question à quelques Anglais autour de moi, et la fonction append telle qu'elle est ne les choque pas le moins du monde...
    Ces personnes sont-elles dans l'informatique ?
    Si je pose la question à n'importe qui dans la rue en leur disant que je prend un truc dans pour l'ajouter ailleurs, alors oui forcément ça nécessite de le déplacer.

    Et si elle sont dans l'informatique, sont-ce des développeurs faisant du JavaScript ?
    Encore une fois, tu prends n'importe quel autre langage, cette notion de déplacement si existant ailleurs n'existe pas.

    Citation Envoyé par psychadelic Voir le message
    Sauf pour le "$(‘#A’).move(‘#B’)" qui, comme pour moi, leur semble absurde, car dans cette construction le move se réfère à l'objet A et non à l'objet B comme tu le voudrait.
    Quand au fait de donner B comme argument d'un déplacement de l'Objet A, cela leur semble vraiment incongru, car justement, c'est un objet, pas un argument..
    Dans quelle logique parce que le verbe est move, la construction s'inverse ?
    Dans quel monde parce que B est un objet ça ne peux pas être un argument (surtout que dans append, B est également un objet) ?

    Citation Envoyé par psychadelic Voir le message
    Mais ça devient amusant, tu as l'air d'être complètement arc-bouté sur ta vision/compréhension, et tu veux qu'elle soit établie comme une vérité absolue et universelle.... (j'espère que tu en ris aussi )
    Ce n'est pas ma vérité absolue
    Encore une fois, tu prends n'importe quel autre langage, cette notion de déplacement si existant ailleurs n'existe pas.

    Citation Envoyé par psychadelic Voir le message
    A la limite tu devrai essayer d'écrire à Google tes remarques (et tu peux y joindre les miennes), je serai curieux de connaître leur réponse éventuelle..

    https://forum.jquery.com/
    Cette remarque est inutile.
    Peu importe ce qu'en pense Google.
    Lorsque des millions de personnes sont habituées à un comportement depuis des années, on ne change pas ce comportement même s'il n'est pas cohérent avec ce que font tous les autres langages.

    Citation Envoyé par psychadelic
    Sinon, j’ai été rechercher dans mon vieux dictionnaire Harraps (traductions FR /UK – UK FR),
    et je te livre ici l’intégralité de leur définition :

    append [ɘ’pend ]. v.tr.
    (a) : attacher, joindre (qch. à qch.). esp.
    (b) : To a. a signature to a document, apposer une signature sur un document.
    To a. a document, to a dossier, annexer un document à un dossier.
    To a. notes, ajouter des notes.

    esp. => Especially == Surtout
    Ces définitions n'ont aucun rapport avec le développement (tout comme celle de cambridge et oxford), et aucune ne saurait s'appliquer à un langage informatique.

    Citation Envoyé par psychadelic
    Et comme l’écrit NoSmoking dans l’instruction "$(‘#A’).append(‘#B’)", #A et #B sont bien des éléments réels à l’intérieur du DOM de ton navigateur.
    Il ne saurait être question de cloner automatiquement l'élément #B, car cela induirait forcément un conflit car on se retrouverai avec 2 objets ayant un même identifiant.
    Il n'est nulle part question d'identifiant (à part peu être celui induit par l'attribut id, or celui-ci a été retiré après le clonage) mais de référence.
    Et avoir la même référence à deux objets à deux endroits différents est justement le piège dans lequel tombent la plupart des néophyte sur les pointeurs car, il se retrouvent avec des comportements non désirés.
    Encore une fois, c'est le comportement qu'on retrouve dans la grande majorité des langages, et jusque la je n'ai vu que JavaScript y faire exception.

  18. #18
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    C'est un véritable scandale !
    Va falloir porter plainte.

    Sinon à part t'offusquer pendant une semaine, tu vas faire quoi au final ?

    Je pense qu'il va simplement au final que tu fasses comme tout le monde, que tu intègres cette notion de append qui déplace, ou que tu arrêtes de développer avec Javascript.
    A moins que tu ne comptes développer ta propre alternative à JavaScript qui se conforme aux usages de la majorité des autres langages.

    Je ne vois pas un intérêt énorme à ce thread à part confirmer ce que tout le monde sait déjà: Javascript est loin d'âtre parfait mais faute de mieux tout le monde fait avec.

  19. #19
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Citation Envoyé par popo Voir le message
    Ces personnes sont-elles dans l'informatique ?
    Si je pose la question à n'importe qui dans la rue en leur disant que je prend un truc dans pour l'ajouter ailleurs, alors oui forcément ça nécessite de le déplacer.
    Oui, ces personnes sont dans l'informatique, et ce sont aussi des codeurs....
    Je dois le prouver ?

    Bon, perso, je vais pas continuer sur ce post, j'ai l'impression qu'aucun argument ne pourra être valable à tes yeux, et bon ,c'est comme ça...

    Sinon, ce fil m'a rappelé ce sujet ou justement la fonction Append (en fait AppendTo) est utilisée dans le fonctionnement d'un slideshow.
    => https://www.developpez.net/forums/d1...ent-slideshow/

    Bonjours chez vous

  20. #20
    Expert confirmé
    Avatar de popo
    Homme Profil pro
    Analyste programmeur Delphi / C#
    Inscrit en
    Mars 2005
    Messages
    2 749
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Analyste programmeur Delphi / C#
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2005
    Messages : 2 749
    Points : 5 453
    Points
    5 453
    Par défaut
    Citation Envoyé par psychadelic
    Bon, perso, je vais pas continuer sur ce post, j'ai l'impression qu'aucun argument ne pourra être valable à tes yeux, et bon ,c'est comme ça...
    Quand on me dit qu'un objet ne peux pas être passé en paramètre, alors oui je considère que ce n'est pas valable comme argument.
    Tout comment lorsqu'on me dit qu'une logique s'inverse sans autre raison que l'utilisation du verbe move.

    Citation Envoyé par SpaceFrog
    Je pense qu'il va simplement au final que tu fasses comme tout le monde, que tu intègres cette notion de append qui déplace, ou que tu arrêtes de développer avec Javascript.
    A moins que tu ne comptes développer ta propre alternative à JavaScript qui se conforme aux usages de la majorité des autres langages.

    Je ne vois pas un intérêt énorme à ce thread à part confirmer ce que tout le monde sait déjà: Javascript est loin d'âtre parfait mais faute de mieux tout le monde fait avec.
    Je n'ai pas vocation à révolutionner JavaScript, ni à le remplacer (quoi que )
    Je voulais simplement faire admettre que lorsqu'on rencontre une méthode nommée "append", on s'attend à ce qu'elle ajoute un élément à la fin mais on ne s'attend pas à ce que cet élément soit retiré d'un autre conteneur où il serait déjà présent (sauf en JavaScript apparemment)
    Je voulais simplement faire admettre que ce comportement auxquels les développeurs JavaScript sont habitués peut être déroutant pour un développeur habitué à travailler dans un autre langage dans la mesure où la grande majorité des langages n'a pas le même comportement.

    Citation Envoyé par SpaceFrog
    Sinon à part t'offusquer pendant une semaine, tu vas faire quoi au final ?
    Comme je l'ai déjà précisé, mon but est d'expérimenter jQuery (et donc JavaScript) dans le but de former mes collaborateurs (faisant du C# et du Delphi) et de nous permettre de reprendre un projet.
    Ce que vais faire, c'est mettre en évidence cette différence de comportement par rapport aux langages auxquels mes collaborateurs et moi même sommes habitués car pour un développeur C# ou Delphi, c'est plus que choquant.

    Je vais également inviter psychadelic à essayer le C# pour qu'il se rende compte du gouffre séparant JavaScript et C# dans l'utilisation et la gestion des pointeurs.
    Et quand il aura modifié ou supprimé un objet par mégarde, il comprendra que JavaScript lui simplifie grandement la vie en déplaçant la référence ou en l'obligeant à la cloner car ça l'empêche de faire n'importe quoi avec un pointeur.

    Bonne journée

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [Débutant] Programmation avec la méthode des éléments finis
    Par Sextus dans le forum MATLAB
    Réponses: 0
    Dernier message: 22/10/2017, 18h53
  2. Réponses: 2
    Dernier message: 25/02/2010, 18h04
  3. Warning avec la méthode "clone" sur un "ArrayList"
    Par Pragmateek dans le forum Collection et Stream
    Réponses: 10
    Dernier message: 04/07/2006, 11h28
  4. [Wscript] probleme avec la méthode send
    Par machinTruc dans le forum Windows
    Réponses: 8
    Dernier message: 18/05/2005, 17h30
  5. Probleme d'impression avec la méthode TForm->Print()
    Par Kid Icarus dans le forum C++Builder
    Réponses: 13
    Dernier message: 31/07/2002, 14h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo