JQuery: HTML yerine 'bellek' içinde HTML oluşturma

Question

DOM'a eklemeden önce bir HTML snippet'ini 'önceden oluşturmanın' bir yolu var mı? Örneğin

: $ mysnippet doesnt DOM mevcut

$mysnippet.append("<h1>hello</h1>"); 
$mysnippet.append("<h1>world</h1>"); 
$("destination").append($mysnippet); 

. Dinamik olarak html yığınları oluşturmak ve daha sonra uygun noktalarda sayfaya eklemek istiyorum.

Answer 1

Evet hemen hemen tam olarak ... o zaman

$('<div>').attr('id', 'yourid').addClass('yourclass').append().append()... 

ve

Bunun bir kısmı uzatma yapmış nasıl nihayet

.appendTo($("#parentid")); 

Answer 2

Tabii, sadece bir dize olarak bunları inşa:

$mysnippet = "<h1>hello</h1>"; 
$mysnippet = $mysnippet + "<h1>world</h1>"; 
$("destination").append($mysnippet); 

Answer 3

Orada

http://plugins.jquery.com/project/appendText

Answer 4

daha karmaşık düğümler (özellikle ağır iç içe olanlar) ile uğraşan, HTML düğümü yazmak ve görünürlük gizli ayarlamak için daha iyi bir yaklaşımdır: Bunun için bir eklenti.

Düğümün bir kopyasını oluşturmak ve içeriğini gereksinimlerinize uyarlamak için JQuery'nin clone() yöntemini kullanabilirsiniz.

E.g.

<div class="template-node" style="display:none;"> 
    <h2>Template Headline</h2> 
    <p class="summary">Summary goes here</p> 
    <a href="#" class="storylink">View full story</a> 
</div> 

çok daha hızlı ve anlaşılır yapmak var: Yukarıda gösterilen gibi bellekte tüm düğüm oluşturmak için

var $clone = $('.template-node').clone(); 
$clone.find('h2').text('My new headline'); 
$clone.find('p').text('My article summary'); 
$clone.find('a').attr('href','article_page.html'); 
$('#destination').append($clone); 

daha bu html ile.

Answer 5

Eski iş parçacığı ama ben aynı şeyi ararken içine çarptı.

var memtag = $('<div />', { 
       'class' : 'yourclass', 
       'id'  : 'theId', 
       'data-aaa' : 'attributevalue', 
       html  : 'text between the div tags' 
}); 

memtag bellek HTML etiketi içinde artık bir olduğunu ve isterseniz DOM eklenebilir. img etiketiyle böyle bir şey yaparsanız, daha sonra kullanmak için görüntüleri önbelleğe 'yükleyebilirsiniz'.

Answer 6

var sample = 
    $('<div></div>') 
     .append(
      $('<div></div>') 
       .addClass('testing-attributes') 
       .text('testing')) 
     .html(); 

yaratır Hangi:

<div class="testing-attributes">testing</div> 

Answer 7

Sen de veri Bunu buluyorum, iç html, vs, vs

var eltProps = { 
    css: { 
     border: 1, 
     "background-color": "red", 
     padding: "5px" 
    }, 
    class: "bblock", 
    id: "bb_1", 
    html: "<span>jQuery</span>", 
    data: { 
     name: "normal-div", 
     role: "building-block" 
    }, 
    click: function() { 
     alert("I was clicked. My id is" + $(this).attr("id")); 
    } 
}; 

var elt = $("<div/>", eltProps); 

$("body").append(elt);