web-dev-qa-db-fra.com

jQuery: append () vs appendTo ()

Je teste les méthodes .append() contre .appendTo() de jQuery à l'aide du code suivant:

$('div/>', {
    id : id,
    text : $(this).text()
    }).appendTo('div[type|="item"]#'+id);
$('div[type|="item"]#'+id).append($(this).text());

Notez que les sélecteurs sont identiques dans .appendTo() et .append(), mais ce dernier fonctionne (dans la même page), alors que ce n'est pas le cas pour le premier. Pourquoi?

Comment faire fonctionner .appendTo() avec ce type de (complexe) selector ? Les deux méthodes s’interpolent-elles différemment? Y a-t-il une syntaxe qui me manque?

Je ne veux pas encombrer le message de code impertinent: il suffit de dire que les éléments référencés par les sélecteurs existent, comme en témoigne la méthode .append() qui produit le résultat souhaité. Faites-moi savoir si plus d'informations sont nécessaires.

Merci!

jqueryjquery-selectorsjquery-append
22
Yevgeniy

Pour répondre à la question, vous n'avez pas d'élément pour appendTo quoi que ce soit, car il vous manque des caractères (dans votre cas, il s'agit d'un accolade<).

Ce

$('div/>',{});

doit être

$('<div/>',{});

créer un élément, sinon il fait exactement ce que vous dites, rien du tout!

Sinon, vous semblez avoir le bon ordre, c'est comme ça:

  • .append() insère le contenu spécifié par le paramètre, jusqu'à la fin de chaque élément dans l'ensemble d'éléments correspondants, comme dans

    $(Append_To_This).append(The_Content_Given_Here);

  • while .appendTo() travaille le sens inverse: il insère tous les éléments dans l'ensemble des éléments correspondants jusqu'à la fin de la cible donnée dans le paramètre, comme dans

    $(The_Content_Given_Here).appendTo(Append_To_This);


Il y a aussi .prepend() et prependTo() qui fonctionne exactement de la même manière, la seule différence étant que les éléments ajoutés sont ajoutés au début du contenu des éléments cibles au lieu de la fin.

32
adeneo

append ajoute le paramètre à l'objet sur lequel vous travaillez.

appendTo ajoute l'objet sur lequel vous travaillez au paramètre.

Plus d'infos ici: http://api.jquery.com/appendTo/

à part cela, il y a quelque chose qui cloche ici:

$('div/>',

ceci ne sélectionne rien.

21
René Wolferink

Pour rendre ces deux plus faciles à comprendre. 

Supposons que j'ai A B C trois chartes commandées.

A append C signifie MOVE C avant A, cela entraîne la réaction de C mais pas A, donc nous avons C A B .

A appendTO C signifie MOVE A after C, cela entraîne le déplacement de A mais pas C, donc nous avons B C A .

  • append et 'appendTo' ont le même résultat que et 丙, mais Tout l'ordre des trois chartes change.
  • En raison de la délocalisation de OOO.appendTo (XXX), le XXX devrait exister avant ce contrôle.
1
Wang Zhou

$('#someDiv').append(someStuff); someStuff.appendTo($('someDiv'));// même résultat ici, juste une façon de le faire différente selon votre style

1
user1142121

Les deux méthodes exécutent la même tâche. La différence majeure est -

  • dans la syntaxe en particulier,
  • dans le placement du contenu et de la cible. 

Avec .append(), l'expression de sélecteur précédant la méthode est le conteneur dans lequel le contenu est inséré.

D'autre part, avec .appendTo(), le contenu précède la méthode, sous forme d'expression de sélecteur ou de balise créée à la volée, et il est inséré dans le conteneur cible.

1
Zigri2612

La méthode.append()insère le contenu spécifié en tant que dernier enfant de chaque élément de la collection jQuery (Pour l'insérer en tant que premier enfant , utilisez.prepend()).

Les méthodes.append()et.appendTo()exécutent la même tâche. La principale différence réside dans la syntaxe, en particulier, dans l'emplacement du contenu et de la cible. Avec.append(), l’expression de sélecteur Précédant la méthode est le conteneur dans lequel le contenu est inséré. Avec.appendTo(), d'autre part, le contenu précède la méthode, sous forme d'expression de sélecteur ou de balisage créé le À la volée, et il est inséré dans le conteneur cible.

1
Umang Patwa

Résultat renvoyé est la seule différence et rend appendTo plus pratique pour les méthodes d'enchaînement

$("<div>...</div>").appendTo(target).hide();  //hide new-element, not the whole target
0
MetNP

Les méthodes .append () et .appendTo () effectuent la même tâche et seuls le contenu cible et HTML à insérer sont modifiés. passez par http://api.jquery.com/appendTo/

0
user2949337