JQuery: Build HTML in 'memory' rather than DOM

Question

Is there a way to 'pre-build' a snippet of HTML before adding it to the DOM?

For example:

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

where $mysnippet doesnt exist in the DOM. I'd like to dynamically build up some lumps of html and then insert them into the page at appropriate points later.

Answer 1

When dealing with more complex nodes (especially heavily nested ones), it is a better approach to write the node in HTML and set its visibility hidden.

You can then use JQuery's clone() method to make a copy of the node and adapt its contents to your needs.

E.g. with this 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> 

it's much faster and understandable to do:

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

than to create the entire node in memory like shown above.

Answer 2

Yes pretty much exactly how you have done it

Some extension of this...

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

and then finally

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