empty - jquery parent

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

Claro, solo compóngalos como una cadena:

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

Answer 2

Hay un complemento para esto:

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

Answer 3

Sí, más o menos exactamente cómo lo has hecho

Alguna extensión de esto ...

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

y finalmente

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

Answer 4

Al tratar con nodos más complejos (especialmente los más anidados), es un mejor enfoque escribir el nodo en HTML y establecer su visibilidad oculta.

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

Por ejemplo, con este 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 de 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 el nodo completo en la 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 ahora es una etiqueta html en 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 más adelante.

Answer 6

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

Lo que crea:

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

Answer 7

Puede precompilarlo y también adjuntar eventos, así como 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);