jQuery append () - renvoie les éléments ajoutés

188

J'utilise jQuery.append () pour ajouter dynamiquement des éléments. Existe-t-il un moyen d'obtenir une collection ou un tableau jQuery de ces éléments nouvellement insérés?

Alors je veux faire ceci:

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);
jquery psychotik
la source
4
duplication possible d'un moyen plus simple d'obtenir un objet jQuery à partir d'un élément ajouté
bleuté

Réponses:

263

Il existe un moyen plus simple de le faire:

$(newHtml).appendTo('#myDiv').effects(...);

Cela change les choses en créant d'abord newHtmlavec jQuery(html [, ownerDocument ]), puis en utilisant appendTo(target)(notez le Tobit " ") pour l'ajouter à la fin de #mydiv.

Parce que vous commencez maintenant avec $(newHtml)le résultat final de appendTo('#myDiv')est ce nouveau bit de html, et l' .effects(...)appel sera également sur ce nouveau bit de html.

SLaks
la source
2
L'utilisation de la version 1.9.2 de l'interface utilisateur jQuery que je reçois effectsn'est pas une fonction ... mais effectc'est
Philipp M
J'ajouterais qu'il existe également une autre signature: appendTo (cible, contexte). Comme pour tout sélecteur jQuery, il permet de rechercher une cible, MAIS uniquement dans un contexte spécifique. Cela peut être très utile si vous écrivez des plugins ou des bibliothèques.
Pierpaolo Cira
1
Cela lèvera une erreur si ce newHtmln'est pas du HTML valide ou un sélecteur jQuery valide: il en $('/ This is Not HTML /').appendTo('#myDiv')résulte Uncaught Error: Syntax error, unrecognized expressionque tout $('#myDiv').append('/ This is Not HTML /')fonctionne correctement en ajoutant du texte à l'élément cible.
Thomas CG de Vilhena
41 
// wrap it in jQuery, now it's a collection
var $elements = $(someHTML);

// append to the DOM
$("#myDiv").append($elements);

// do stuff, using the initial reference
$elements.effects("highlight", {}, 2000);
karim79
la source
2
Cela n'a pas fonctionné pour moi lorsque j'ai essayé plus tard de lier un événement à l'élément ajouté. J'ai utilisé var appendedTarget = $ (newHtml) .appendTo (element). Je pourrais alors lier en utilisant $ (appendedTarget) .bind ('keydown', someFunc)
Zac Imboden
Je pense que $elements.effect("highlight", {}, 2000);non effects.
pourquoi
2
Cela ne fonctionne pas car la variable $ elements après avoir été ajoutée, change et n'est plus disponible.
Alex V
@AlexV Cela semble fonctionner, voir la démo en direct sur jsbin.com/xivedohofi/1/edit?html,js,output , voir également la même réponse acceptée pour la question similaire stackoverflow.com/questions/1443233/…
Adrien Be
2
Il semble qu'ils aient corrigé ce problème dans les nouvelles versions de jQuery.
Alex V
30 
var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);
Thiago Belem
la source
10

Un petit rappel , lorsque des éléments sont ajoutés de façon dynamique, des fonctions telles que append(), appendTo(), prepend()ou prependTo()retourner un objet jQuery, pas l'élément DOM HTML.

DEMO

var container=$("div.container").get(0),
    htmlA="<div class=children>A</div>",
    htmlB="<div class=children>B</div>";

// jQuery object
alert( $(container).append(htmlA) ); // outputs "[object Object]"

// HTML DOM element
alert( $(container).append(htmlB).get(0) ); // outputs "[object HTMLDivElement]"
AgelessEssence
la source
19
L'élément renvoyé par append () est le conteneur et non le nouvel élément.
Tomas
0

Je pense que vous pourriez faire quelque chose comme ça:

var $child = $("#parentId").append("<div></div>").children("div:last-child");

Le parent #parentId est retourné à partir de l'ajout, alors ajoutez-lui une requête jquery children pour obtenir le dernier enfant div inséré.

$ child est alors le div enfant enveloppé par jquery qui a été ajouté.

aff
la source