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.
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.
$ to give them some jQuery "flavor" to help distinguish them from other local variables.
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"));
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.
Sure, just build them as a string:
$mysnippet = "<h1>hello</h1>";
$mysnippet = $mysnippet + "<h1>world</h1>";
$("destination").append($mysnippet);
There is a plugin for this:
var sample =
$('<div></div>')
.append(
$('<div></div>')
.addClass('testing-attributes')
.text('testing'))
.html();
Which creates:
<div class="testing-attributes">testing</div>
You can prebuild it and also attach events, as well as data attributes, inner html, 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);
