Mine also allows you to save references to inner objects. If you wanted the inner A element from my example, you’d do this:


var a;
$.DIV({ id:'test', 'class':'outer' },
$.SPAN({ 'class':'inner' },
a = $.A({ href:'example.html', title:'Howdy' },
'Click me' ) ) );


Olsow’s function doesn’t let you save references to inner elements – it just gives you a jQuery object for the topmost element(s).

To compare the different techniques, let’s try a more interesting bit of HTML code:


<div id="test" class="outer">
<span class="inner">
<a href="example.html" title="Howdy">
Click me
</a>
</span>
</div>


Here’s the output from DOMTool:


var div1=document.createElement('DIV');
div1.className='outer';
div1.setAttribute('id','test');
var span1=document.createElement('SPAN');
span1.className='inner';
div1.appendChild(span1);
var a1=document.createElement('A');
a1.setAttribute('title','Howdy');
a1.setAttribute('href','example.html');
span1.appendChild(a1);
var txt1=document.createTextNode('Click me\n ');
a1.appendChild(txt1);


Here’s how you would code it with my DOM creation functions:


$.DIV({ id:'test', 'class':'outer' },
$.SPAN({ 'class':'inner' },
$.A({ href:'example.html', title:'Howdy' },
'Click me'
)
)
);


And here is how it be using Olsow’s DOM creation function (posted in the comments to my page that James referenced):


$.create(
'div', { id:'test', 'class':'outer' }, [
'span', { 'class':'inner' }, [
'a', { href:'example.html', title:'Howdy' }, [
'Click me'
]
]
]
);


http://mg.to/topics/programming/javascript/jquery

It really makes creating DOM fragments much, much simpler.

I’m personally a fan of cloning HTML templates, (grabbing a collection of nodes and using cloneNode(true),) which would also work with the HTML-based approach given here. (This was used extensively for Yahoo! Photos and worked quite well.)

You may still have to modify each instance slightly for your uses, but the structure would be left intact – and that saves you a lot of time. It’s also very simple if someone wants to modify your template structure, since it’s HTML! I’ve learned over the years that it seems best to leave HTML where it works best (as HTML), and not to create big complex structures of it using Javascript (but cloning and extending/customising with JS where appropriate.)