jQuery append() - retourne ajouté des éléments

Je suis en utilisant jQuery.append() ajouter certains éléments de façon dynamique. Est-il possible d'obtenir un jQuery collection ou un tableau de ces nouveaux éléments insérés?

Alors je veux faire ceci:

$("#myDiv").append(newHtml);
var newElementsAppended = //answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);
InformationsquelleAutor psychotik | 2010-01-29
  1. 253

    Il y a un moyen plus simple de faire ceci:

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

    Ce tourne autour de la création du premier newHtml avec jQuery(html [, ownerDocument ]), puis à l'aide de appendTo(cible) (notez le "To" bit) à ajouter que, à la fin de #mydiv.

    Car vous avez maintenant commencer avec $(newHtml) le résultat final de appendTo('#myDiv') qui est à nouveau peu de html, et le .effects(...) appel sera sur que nouveau peu de html aussi.

    • Je pense que j'ai effectivement utiliser appendTo et prependTo beaucoup plus que je n'ai jamais utiliser append et prepend.
    • À l'aide de jQuery UI version 1.9.2 je suis effects n'est pas une fonction... mais effectest
    • œuvres génial pour ajouter dynamiquement des éléments via AJAX et attachant .data() pour eux 😀
    • Je voudrais ajouter qu'il existe aussi une autre signature: appendTo(cible, contexte). Comme pour n'importe quel sélecteur jQuery, il permet de rechercher de la cible , MAIS seulement à l'intérieur d'un contexte spécifique. Il peut être très utile si vous écrivez des plugins ou des bibliothèques.
    • Cela provoquera une erreur si newHtml n'est pas valide HTML ou valide d'un sélecteur jQuery: $('/ This is Not HTML /').appendTo('#myDiv') résultats dans Uncaught Error: Syntax error, unrecognized expression tout $('#myDiv').append('/ This is Not HTML /') fonctionne correctement par l'ajout de texte à l'élément cible.
    InformationsquelleAutor SLaks
  2. 39
    //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);
    • Cela n'a pas fonctionné pour moi, quand plus tard, j'ai essayé de lier un événement à l'élément ajouté. J'ai utilisé var appendedTarget = $(newHtml).appendTo(élément). J'ai pu alors se lier à l'aide de $(appendedTarget).bind('bas',someFunc)
    • Je pense que c'est $elements.effect("highlight", {}, 2000);, pas effects.
    • Cela ne marche pas parce que le $éléments de la variable après avoir été ajouté, les changements et n'est plus disponible.
    • Cela semble fonctionner, voir la démonstration en direct sur jsbin.com/xivedohofi/1/edit?html,js,sortie , voir aussi la même réponse qu'il est accepté pour la question similaire, stackoverflow.com/questions/1443233/...
    • Il semble qu'ils ont corrigé cela dans les nouvelles versions de jQuery.
    InformationsquelleAutor karim79
  3. 28
    var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);
    InformationsquelleAutor Thiago Belem
  4. 10

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

    DÉMO

    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]"
    • Le retour de l'élément de append() est le contenant et pas le nouvel élément.
    InformationsquelleAutor AgelessEssence
  5. 0

    Je pense que vous pourriez faire quelque chose comme ceci:

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

    Le parent #parentId est retourné à partir de l'ajouter, il faut donc ajouter un jquery enfants de requête pour obtenir la dernière div enfant inséré.

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

    InformationsquelleAutor aff