Comment manipuler du code HTML à l'intérieur d'un jQuery variable?

Je suis en train de manipuler le code HTML stocké dans un jQuery variable. Je veux faire cette manipulation avant d'écrire la variable pour le document.

J'ai une variable définie comme:

var sighting = "<div><span class="feed_name"></span></div>";

Et je veux mettre "hello world" dans le span élément. C'est la partie que je n'arrive pas à travailler:

$(sighting).("span.feed_name").html(name);

Puis-je écrire le 'observation' variable à la page:

$(#sightings).append(sighting);

Qui met le code HTML dans l'observation de la variable dans le <div id="sightings"></div> élément sur la page.

Toute aide serait grandement appréciée!

Merci,

Marque

  • $(sighting).("span.feed_name").html(name) n'est pas la même syntaxe valide. Vous voulez $(sighting).find("span.feed_name").html(name).
InformationsquelleAutor Mark | 2010-02-28
  1. 11

    Je préfère cette méthode, vous aurez plus de contrôle sur les éléments, parce qu'ils restent comme des objets, et sont donc plus faciles à forcer dans les fonctions de.

    sighting = document.createElement('div');

    Alors vous pouvez manipuler comme si elle était déjà partie du DOM

    $(sighting).addClass("feed_name").html(name);
$(sighting).appendTo("#sighting");

    MODIFIER

    Hmm... il semble que j'ai mal lu votre question. Je préfère encore faire les éléments à l'aide de la createElement() fonction.

    sighting = document.createElement('div');
sighting_contents = document.createElement('span');

$(sighting_contents).addClass("feed_name").html(name);
$(sighting).append(sighting_contents);
$(sighting).appendTo("#sightings");

    Un peu plus verbeux, mais vous pouvez les cordes les trois derniers dans une longue ligne si vous voulez... je pense que c'est plus lisible et en fin de compte vous donne plus de contrôle, parce que, techniquement, vous ne devriez pas être la rédaction d'un tas de HTML dans votre js, vous pouvez créer des éléments et de l'annexer, mais aussi loin que l'écriture de gros blocs de balisage, je pense que la création d'éléments comme des objets, comme cela vous donne plus de flexibilité.

    Vous pouvez également joindre des événements à des éléments ajoutés comme cela dans un moyen plus simple:

    $(sighting).bind("click", function(event) {
  $(this).fadeOut();
});
    • Bonjour Joseph, Merci pour votre réponse! Cela ressemble à l'approche que je veux, mais quand j'écris: sighting1 = document.createElement("<div class='sighting1" ></div>"); j'obtiens le js error: error: uncaught exception: [Exception... "Chaîne de caractères contient un caractère non valide code": "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" emplacement: "myurl.com la Ligne: 47"] les idées de ce que cela pourrait être du? Merci, Marc
    • Oui, c'est l'erreur attendue. Vous n'avez pas besoin du code html dans la fonction juste ne: document.createElement('div'); Vous ne pouvez pas mettre du HTML dans cette fonction, la balise de l'élément que vous souhaitez créer.
    • Ha, je vois. Il a travaillé! Merci pour votre aide.
    InformationsquelleAutor JP Silvashy
  2. 4

    Essayez ceci:

    var sighting = "<div><span class=\"feed_name\"></span></div>",
    $elem = $(sighting).find("span.feed_name").text("hello world").parent();
$("#sightings").append($elem);

    La parent appel est nécessaire pour revenir à l'extérieur div.

    • LOL, vous l'avez d'abord et même avec la même rubrique "Essayez ce qui suit:" 😀 (ma réponse supprimé)
    • Salut Gumbo, Merci pour votre aide! J'ai fini par aller avec l'autre réponse, mais le vôtre a été très utile. Marque
    InformationsquelleAutor Gumbo