jQuery does provide great ways to generate dynamic HTML. In fact, the FuncyTag
quick example from <a href="https://github.com/BrentNoorda/FuncyTag#quick-example" rel="nofollow">https://github.com/BrentNoorda/FuncyTag#quick-example</a><p><pre><code> t = div( { id:'animal-'+id, class:genus },
p( { cssColor: endangered?'red':'green', cssFontSize_pct: endangered?120:undefined },
'The', b('species'), 'is a', genus, 'and looks like this:',
img( { width:imgSize, height:imgSize, src:'/pix/' + id + '.jpg' } )
)
);
</code></pre>
can be written in pure jQuery in a very similar fashion:<p><pre><code> t = $('<div/>',{ id:'animal-'+id, class:genus }).append(
$('<p/>').css({ color:endangered?'red':'green', fontSize:endangered?'120%':'' }).append(
'The ', $('<b/>').text(species), ' is a ', genus, ' and looks like this:',
$('<img/>',{ width:imgSize, height:imgSize, src:'/pix' + id + '.jpg' } )
)
);
</code></pre>
So I don't claim any tremendous FuncyTag breakthrough if you're accustomed to the jQuery style.<p>There's a few differences in FuncyTag that I've found work better for me:
1) treating tags fully as functions means I can read it and write it easier
2) set css/Styles the same as setting attributes (through cssCamelStyle), instead
of using css() versus attr()
3) setting the css units as part of the name (e.g. cssMarginLeft_em:2)
4) creating html strings with indentation, so alert(t) helps me see the HTML when I'm debugging<p>I just find one of the above approaches easier to read than the other, and keep going
back to it so thought I'd finally document and share. (Maybe the FuncyTag approach is
easier, or maybe I'm just so familiar with it since that's how I've most enjoyed creating
HTML from javascript since about the mid 90's.)