¿Cómo manipular HTML dentro de una variable jQuery?

Question

Estoy tratando de manipular el HTML almacenado dentro de una variable jQuery. Quiero hacer esta manipulación antes de escribir la variable en el documento.

lo tanto, tengo una variable definida como:

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

Y quiero poner "hola mundo" en el elemento span. Esta es la parte que no puedo llegar a trabajar:

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

Entonces escribo la variable 'avistamiento' a la página:

$(#sightings).append(sighting); 

que pone el código HTML en la variable de mira en el <div id="sightings"></div> elemento en la página.

Cualquier ayuda sería muy apreciada!

Gracias,

Marcos

Answer 1

Prueba esto: se necesita

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

La llamada parent para volver a la div exterior.

Answer 2

Prefiero este método, tendrá más control sobre los elementos, ya que permanecen como objetos y, por lo tanto, son más fáciles de coercionar en las funciones.

sighting = document.createElement('div'); 

Entonces se puede manipular como si ya era parte del DOM

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

EDITAR

Hmm ... parece leí mal su pregunta. Todavía preferiría hacer los elementos usando la función 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 poco más detallado, pero se puede cadena de los tres últimos en una línea larga si quieres ... creo que esto es más fácil de leer y, finalmente, le da más control, porque técnicamente no debería estar escribiendo un montón de HTML en su js, puede crear los elementos y anexarlos, pero en cuanto a la escritura de grandes bloques de marcado creo que la creación de los elementos como objetos como este le da más flexibilidad.

También puede adjuntar eventos a elementos añadidos como esto de una manera más sencilla:..

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