Comment manipuler le code HTML dans une variable jQuery?

Question

J'essaie de manipuler le HTML stocké dans une variable jQuery. Je veux faire cette manipulation avant d'écrire la variable dans le document.

Donc, j'ai une variable définie comme:

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

Et je veux mettre « Bonjour tout le monde » dans l'élément span. Ceci est la partie que je ne peux pas travailler:

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

J'écris la variable de visée 'à la page:

$(#sightings).append(sighting); 

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

Toute aide serait grandement appréciée!

Merci,

Mark

Answer 1

Essayez ceci:

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

L'appel parent est nécessaire pour revenir à la div extérieure.

Answer 2

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

sighting = document.createElement('div'); 

Ensuite, vous pouvez manipuler comme si elle faisait déjà partie du DOM

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

EDIT

Hmm ... il semble que je mal lu votre question. Je préférerais encore faire les éléments en utilisant la fonction createElement().

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 bavard, mais vous pouvez enchaîner les trois derniers en une seule ligne si vous voulez ... Je pense que cela est plus facile à lire et en fin de compte vous donne plus de contrôle, parce que techniquement vous ne devriez pas écrire un tas de HTML dans votre js, vous pouvez créer les éléments et les ajouter, mais en ce qui concerne l'écriture de gros blocs de balisage, je pense que la création d'éléments comme des objets comme celui-ci vous donne plus de flexibilité.

Vous pouvez également joindre des événements aux éléments ajoutés comme celui-ci d'une manière plus simple:..

$(sighting).bind("click", function(event) { 
    $(this).fadeOut(); 
});