JQuery: Construisez du HTML en 'mémoire' plutôt qu'en DOM

Question

Existe-t-il un moyen de «pré-construire» un extrait de code HTML avant de l'ajouter au DOM?

Par exemple:

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

où $ mysnippet n'existe pas dans le DOM. Je voudrais créer dynamiquement des morceaux de code HTML, puis les insérer dans la page aux points appropriés plus tard.

Answer 1

Lorsque vous traitez des nœuds plus complexes (en particulier des nœuds fortement imbriqués), il est préférable d'écrire le nœud en HTML et de masquer sa visibilité.

Vous pouvez ensuite utiliser la méthode clone () de JQuery pour faire une copie du nœud et adapter son contenu à vos besoins.

Par exemple avec ce 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>
 

c'est beaucoup plus rapide et compréhensible:

 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 de créer le nœud entier en mémoire comme indiqué ci-dessus.

Answer 2

Oui, exactement comment vous l'avez fait

Une extension de cela ...

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

puis enfin

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

Answer 3

Vieux fil mais je suis tombé dessus en cherchant le même.

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

memtag est maintenant une balise html en mémoire et peut être insérée dans le DOM si vous le souhaitez. Si vous faites une telle chose avec une balise img vous pouvez «précharger» les images dans le cache pour une utilisation ultérieure.

Answer 4

Bien sûr, il suffit de les construire sous forme de chaîne:

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

Answer 5

Il existe un plugin pour cela:

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