JQuery: Zbuduj HTML w "pamięci" zamiast DOM

Question

Czy istnieje sposób na "wstępne zbudowanie" fragmentu kodu HTML przed dodaniem go do DOM?

Na przykład:

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

gdzie $ mysnippet robi istnieje w DOM. Chciałbym dynamicznie zbudować kilka brył html, a następnie wstawić je na stronę w odpowiednich punktach później.

Answer 1

Tak prawie dokładnie jak to zrobić

Niektóre przedłużenie tego ...

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

i wreszcie

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

Answer 2

Jasne, tylko budować je jako ciąg znaków:

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

Answer 3

Tam Jest to plugin do tego:

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

Answer 4

Gdy mamy do czynienia z bardziej skomplikowanych węzłów (zwłaszcza te, które mocno zagnieżdżonych), jest to lepsze podejście do pisania węzeł w HTML i ustawić jego widoczność ukryte.

Następnie można użyć metody clone() JQuery do utworzenia kopii węzła i dostosowania jej zawartości do własnych potrzeb.

E.g. z tym HTML:

<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> 

to o wiele szybciej i zrozumiałe zrobić:

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); 

niż tworzyć cały węzeł w pamięci jak pokazano powyżej.

Answer 5

Stary wątek, ale natknąłem się na niego podczas wyszukiwania tego samego.

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

memtag jest teraz w tagu html pamięci i mogą być wstawiane do DOM, jeśli chcesz. Jeśli zrobisz coś ze znacznikiem img, możesz "wczytać" obrazy do pamięci podręcznej do późniejszego wykorzystania.

Answer 6

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

który tworzy:

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

Answer 7

Można prebuild go i również dołączyć zdarzenia, jak również dane atrybutów, wewnętrzną html, itp, itd

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);