FWIW, I used FlyDOM and some like it and gave up on them, because:
1. syntax debugging made me cranky, compared to just writing HTML
2. it was noticably slower for more than just some small usages
3. I discovered this:
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
With those (trimpath templates), I rarely generate any HTML inside my js
files anymore: mainly just get json data from the server and pump it
into trimpath templates to create the HTML and then use
$('#something').html(templateResult); to pump it into the DOM. It's
worked for some large tables (for reporting) rather speedily/nicely,
too. A nice side effect is that because the trimpath markup syntax is so
easy, the templates can be worked on by designery folks not steeped in
js with low risk (of code munging), and a big plus from the js coding
side is that the templates can contain js, so js vars can be created,
set, etc and any js function can be used in the template.
- Jack
James Dempster wrote:
Thanks Mike, that is nice to know. Ofcourse all that could go on one
line but I dont find it very readable and will be doing what you
mentioned from now on.
On 9/29/07, * Michael Geary* <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>>
wrote:
> From: James Dempster
>
> I've never really understood the point to FlyDOM. It seems
> like a nice idea, but whats wrong with just using jQuery?
>
> FlyDOM
> $('#exampleCA').createAppend(
> 'table', { width: '718px', style: 'border: 2px inset
#336699;' }, [
> 'tr', { className: 'exampleRow' }, [
> 'td', { align: 'center', style: 'color: white;' },
> 'I was created by createAppend()!'
> ]
> ]
> );
>
> jQuery
> $('#exampleCA').append($(
> '<table style="width:718px;border:2px inset #336699">'+
> '<tr class="exampleRow">'+
> '<td style="text-align:center;color:white;">'+
> 'I was created by jQuery append'+
> '</td>'+
> '</tr>'+
> '</table>'
> ));
>
> As far as I can tell both of these would do the same thing?
> They're both as easy as each other, maybe jQuery is even
> easier as it's plain html. Would the jQuery version be faster
> also as it could just inject the html into the DOM using
> something like innerHTML.
Yes indeed, innerHTML is faster than DOM insertion, and you also
remove the overhead of the code that interprets the element list.
In fact, I wrote the first jQuery DOM plugin, and I don't use my
own plugin any more!
You can improve the speed even more by using [].join instead of
string concatenation:
$('#exampleCA').append($( [
'<table style="width:718px;border:2px inset #336699">',
'<tr class="exampleRow">',
'<td style="text-align:center;color:white;">',
'I was created by jQuery append',
'</td>',
'</tr>',
'</table>'
].join('') ));
In your simple test case it won't make any difference, but if you
are stringing together a lot of HTML code, [].join will speed it
up in most browsers.
-Mike
