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(\"
hello
\");
$mysni         


        

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

Old thread but I bumped into it while searching for the same.

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

memtag is now an in memory html tag, and can be inserted into the DOM if you want. If you do such thing with an img tag you can 'preload' images into the cache for later use.

Answer 3

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

Which creates:

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

Answer 4

There is a plugin for this:

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

Answer 5

Sure, just build them as a string:

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

Answer 6

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