Bir jQuery değişkeni içinde HTML nasıl kullanılır?

Question

Bir jQuery değişkeni içinde depolanmış HTML'yi işlemeye çalışıyorum. Değişkeni belgeye yazmadan önce bu manipülasyonu yapmak istiyorum.

Yani, bir değişken olarak tanımlanan vardır:

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

Ve span eleman "Merhaba dünya" koymak istiyorum. <div id="sightings"></div> içine nişan değişkeninde HTML koyar

$(#sightings).append(sighting); 

:

Sonra

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

ben sayfaya 'nişan' değişkeni yazma: Bu benim alamayan parçası çalışmaktır sayfadaki öğe.

Herhangi bir yardım çok takdir edilecektir!

sayesinde

Mark

Answer 1

bu deneyin:

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

parent çağrı dış div geri almak için gereklidir.

Answer 2

Bu yöntemi tercih ederim, elemanlar üzerinde daha fazla kontrole sahip olacaksınız, çünkü bunlar nesne olarak kalıyorlar ve böylece işlevlere zorlanmaları daha kolay oluyor. Zaten DOM

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

DÜZENLEME

Hmm bir parçasıydı sanki

sighting = document.createElement('div'); 

Sonra manipüle edebilir ... ben sorunuzu yanlış okumuş gibi görünüyor. Yine de elemanları createElement() işlevini kullanarak yapmayı tercih ederim.

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

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

Biraz daha ayrıntılı, ancak dize isterseniz tek bir uzun hattına son üç ... Bu daha okunabilir olduğunu düşünüyorum ve teknik olarak yazmakta olmamalı çünkü sonuçta daha fazla kontrol sağlar olabilir js'nizde bir grup HTML oluşturabilir, onları oluşturabilir ve onları ekleyebilirsin, ama büyük bloklama blokları yazarken, elementleri bu gibi nesneler olarak yaratmanın daha fazla esneklik sağladığını düşünüyorum.

Ayrıca daha basit bir şekilde böyle eklenen öğelere olayları ekleyebilirsiniz.:.

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