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