JQuery: compila HTML en "memoria" en lugar de DOM

Question

¿Hay alguna manera de "precompilar" un fragmento de HTML antes de agregarlo al DOM?

Por ejemplo:

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

donde $ mysnippet no lo existe en el DOM. Me gustaría construir dinámicamente algunos trozos de html y luego insertarlos en la página en los puntos apropiados más adelante.

Answer 1

Sí casi exactamente la forma en que lo ha hecho

Algunos extensión de esta ...

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

y finalmente

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

Answer 2

Claro, sólo construirlos como una cadena:

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

Answer 3

There es un plugin para esto:

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

Answer 4

Cuando se trata de nodos más complejos (especialmente los muy anidados), que es un mejor enfoque para escribir el nodo en HTML y establecer su visibilidad oculto.

Puede utilizar el método clone() de JQuery para hacer una copia del nodo y adaptar su contenido a sus necesidades.

E.g. con este código 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> 

es mucho más rápido y comprensible para hacer:

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

que crear todo el nodo de memoria como se muestra arriba.

Answer 5

Hilo viejo pero me encontré con él mientras buscaba lo mismo.

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

memtag es ahora una etiqueta HTML en la memoria, y se puede insertar en el DOM si lo desea. Si lo hace con una etiqueta img, puede "precargar" imágenes en la memoria caché para usarlas posteriormente.

Answer 6

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

que crea:

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

Answer 7

Puede prefabricados y también adjunte eventos, así como los atributos de datos, HTML interno, etc, etc.

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