jQuery Forum

<span style="font-family: trebuchet ms;">I suggest LiveQuery.  Really easy to use.  I haven't tried the other.</span><br style="font-family: trebuchet ms;"><span style="font-family: trebuchet ms;">Also check out the FlyDOM plugin.  Might be useful.
</span><br style="font-family: trebuchet ms;"><span style="font-family: trebuchet ms;"><a href="http://jquery.com/plugins/project/FlyDOM">http://jquery.com/plugins/project/FlyDOM</a></span><br style="font-family: trebuchet ms;">
<br style="font-family: trebuchet ms;"><span style="font-family: trebuchet ms;">Glen</span>
<div><span class="gmail_quote">On 9/29/07, <b class="gmail_sendername">goodieboy</b> <<a href="mailto:goodieBoy@gmail.com">
goodieBoy@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Hi,
I've created code to dynamically add blocks of form elements to a
form. Basically, a set of text fields and radio buttons. It seems to
work fine now, but my code is completely dependent on the structure of
the html, which is expected I guess and I'd like to do is simplify my
code. Because I'm adding new html which needs to have events attached
to specific items, I have to re-attach each event handlers. I wonder,
would it be better to use something like LiveQuery or the Intercept
plugin? How are people handling this type of thing?
Thanks,
Matt
</blockquote></div>

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.
Any ideas?

> 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

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.
<div><span class="gmail_quote">On 9/29/07, <b class="gmail_sendername">
Michael Geary</b> <<a href="mailto:Mike@geary.com">Mike@geary.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> 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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
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:
<a class="moz-txt-link-freetext" href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplates">http://code.google.com/p/trimpath/wiki/JavaScriptTemplates</a>
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:
<blockquote
cite="mid:462e563f0709291129p7a238598o84378ce9fe0d8a58@mail.gmail.com"
type="cite">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.

<div><span class="gmail_quote">On 9/29/07, <b
class="gmail_sendername">
Michael Geary</b> <<a moz-do-not-send="true"
href="mailto:Mike@geary.com">Mike@geary.com</a>> wrote:</span>
<blockquote class="gmail_quote"
style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> 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


</blockquote>
</div>
</blockquote>
</body>
</html>

Nice use of join()! I'm new to JavaScript and jQuery both, and it's
nice to come across little snippets like this I can readily add to my
jQuery repetoire and that slightly expand my understanding of
JavaScript.
By the way, the docs show that it's legal to pass, as an argument to
append(), either a jQuery object (as you're doing), a DOM element, or
a string. So you really don't need to wrap the stringified array in a
jQuery object before you pass it in. Unless there's another reason for
doing so that I'm missing.
Apropos to the above, I wonder why the docs for appendTo() show a
string as being the only legal argument type? I tried a test passing
in a jQuery object instead and it worked just fine. Does that mean you
can use a jQuery object *any* time a string is called for in other
jQuery methods as well? Or just a case of the documentation needing to
be adjusted in this one case?
Howard

Glad you like the [].join('') trick, Howard - and good catch on the unnecessary wrapper. You didn't miss anything, and that
simplifies the example down to:
$('#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('') );
One other thing I like about this approach is that - unlike the + concatenation operator - the comma operator has lower precedence
than the ? : conditional operator and the || and && logical operators. So you can write code like this:
var html = [
'<div>',
name ? name : 'no name',
'</div>'
].join('');
You could do that with string concatenation, but it would require parenthesis around the conditional expression, which adds a bit of
ugliness.
You're right on the appendTo vs. append question too - the docs need to be updated. Check the source code:
jQuery.each({
appendTo: "append",
prependTo: "prepend",
insertBefore: "before",
insertAfter: "after",
replaceAll: "replaceWith"
}, function(i,n){
jQuery.fn[ i ] = function(){
var a = arguments;
return this.each(function(){
for ( var j = 0, al = a.length; j < al; j++ )
jQuery(a[j])[n]( this );
});
};
});
appendTo is just a wrapper around append - just like prependTo, etc. And all of these functions run their arguments through
domManip(), which is the code that handles the text vs. DOM element question.
I wouldn't assume that any jQuery function that takes a string will also take DOM elements or jQuery objects, but for this group of
functions it's certainly true.
-Mike

One of the greatest things about jQuery though is that the code is quite easy to read and understand, so if unsure just check. If still unsure, then what a great active community though the groups !
Love the tips, it might be quite nice if maybe the core could be changed to accept an array (maybe it already does) maybe it would be an extra overhead that's not needed.
<br clear="all">
/James
<div><span class="gmail_quote">On 10/1/07, <b class="gmail_sendername">Michael Geary</b> <<a href="mailto:Mike@geary.com">Mike@geary.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Glad you like the [].join('') trick, Howard - and good catch on the unnecessary wrapper. You didn't miss anything, and that
simplifies the example down to:
  $('#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('') );
One other thing I like about this approach is that - unlike the + concatenation operator - the comma operator has lower precedence
than the ? : conditional operator and the || and && logical operators. So you can write code like this:
  var html = [
     '<div>',
        name ? name : 'no name',
     '</div>'
  ].join('');
You could do that with string concatenation, but it would require parenthesis around the conditional expression, which adds a bit of
ugliness.
You're right on the appendTo vs. append question too - the docs need to be updated. Check the source code:
   jQuery.each({
      appendTo: "append",
      prependTo: "prepend",
      insertBefore: "before",
      insertAfter: "after",
      replaceAll: "replaceWith"
   }, function(i,n){
      jQuery.fn[ i ] = function(){
         var a = arguments;
         return this.each(function(){
            for ( var j = 0, al = a.length; j < al; j++ )
               jQuery(a[j])[n]( this );
         });
      };
   });
appendTo is just a wrapper around append - just like prependTo, etc. And all of these functions run their arguments through
domManip(), which is the code that handles the text vs. DOM element question.
I wouldn't assume that any jQuery function that takes a string will also take DOM elements or jQuery objects, but for this group of
functions it's certainly true.
-Mike
> From: howardk
>
> Nice use of join()! I'm new to JavaScript and jQuery both,
> and it's nice to come across little snippets like this I can
> readily add to my jQuery repetoire and that slightly expand
> my understanding of JavaScript.
>
> By the way, the docs show that it's legal to pass, as an
> argument to append(), either a jQuery object (as you're
> doing), a DOM element, or a string. So you really don't need
> to wrap the stringified array in a jQuery object before you
> pass it in. Unless there's another reason for doing so that
> I'm missing.
>
> Apropos to the above, I wonder why the docs for appendTo()
> show a string as being the only legal argument type? I tried
> a test passing in a jQuery object instead and it worked just
> fine. Does that mean you can use a jQuery object *any* time a
> string is called for in other jQuery methods as well? Or just
> a case of the documentation needing to be adjusted in this one case?

Hi everyone,
I have been using FlyDOM, and am trying to convert some of that code
to use the jQuery append, after reading what Mike wrote about better
performance. I am trying to dynamically insert some attributes.
However I'm getting a syntax error, so I think I'm not understanding
something simple here on how the append/join syntax works. Here is an
example:
$($(this).parent()).append(["

","<input type='text'
class='"+inputClass+"'","<button onclick: '"+$
(this).parent().remove();return false;+"'","

"].join(""));
I get an: missing ] after element list error in Firebug. Any thoughts?
Thanks.
Matt

I think this it what your trying todo...
$(this).parent().append(["

", "<input type='text' class='"+inputClass
+"'", "<button onclick='$(this).parent().remove();return false;'>x</
button>", "

"].join(""));
Much nicer to split the lines making it more readable.
$(this).parent().append([
"

",
"<input type='text' class='"+inputClass+"'",
"<button onclick='$(this).parent().remove();return false;'>x</
button>",
"

"
].join(""));
hope this helps

> From: James Dempster
>
> Much nicer to split the lines making it more readable.
>
> $(this).parent().append([
> "

",
> "<input type='text' class='"+inputClass+"'",
> "<button onclick='$(this).parent().remove();return
false;'>x</button>",
> "

"
> ].join(""));
Also, once you're using .join, you don't have to use + inside it; you can
use comma for all your string concatenation. And there's a missing /> in the
input tag, so let's fix that:
$(this).parent().append([
"

",
"<input type='text' class='", inputClass, "' />",
"<button onclick='$(this).parent().remove();return
false;'>x</button>",
"

"
].join(""));
Finally, this is purely stylistic, but I like to put the begin tags and end
tags on separate lines to make it easier to make sure they are matched up,
and also (really getting into personal preference here) I like to swap
around the " and ' quote marks, using " as the HTML quote and ' as the
JavaScript quote:
$(this).parent().append([
'

',
'<input type="text" class="', inputClass, '" />',
'<button onclick="$(this).parent().remove();return false;">',
'x',
'</button>',
'

'
].join(''));
I do the quotes this way because seems a lot more common to use " in HTML
code, and because I type a lot more JavaScript quotes than HTML quotes, so
using ' for the JavaScript quotes makes it a tiny bit easier to type. :-)
-Mike

I do occasionally look at the source code, but I'm still new enough to
JavaScript that sometimes (even with 12 years of Java under my belt,
and a whole slew of other languages going back some 40 years) that
when I'm faced with new js constructs for the first time, about all I
can do is stare glassy-eyed and go "Huh?" And that's pretty well my
reaction to the snippet you posted below: "Huh?" :-) Would you be up
for walking through it verbally, explaining what it's doing?
In any event, not to worry: I'm learning fast, and I'm intrigued. This
is a much more interesting language than I had previously thought.
Howard

I'd total agree with what Michael said. Infact HTML coding guidelines and W3C Standards say that HTML quotes should be double "
Also as a PHP developer I tend to use single quotes ' for programming, but that's because in PHP it doesn't use the parse engine looking for varibles, but thats a different topic ;) So I tend to also use single quotes in Javascript, it's just easier that way.
<br clear="all">
/James
<div><span class="gmail_quote">On 10/2/07, <b class="gmail_sendername">Michael Geary</b> <<a href="mailto:Mike@geary.com">Mike@geary.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> From: James Dempster
>
> Much nicer to split the lines making it more readable.
>
> $(this).parent().append([
>     "

",
>         "<input type='text' class='"+inputClass+"'",
>         "<button onclick='$(this).parent().remove();return
false;'>x</button>",
>     "

"
> ].join(""));
Also, once you're using .join, you don't have to use + inside it; you can
use comma for all your string concatenation. And there's a missing /> in the
input tag, so let's fix that:
$(this).parent().append([
     "

",
         "<input type='text' class='", inputClass, "' />",
         "<button onclick='$(this).parent().remove();return
false;'>x</button>",
     "

"
].join(""));
Finally, this is purely stylistic, but I like to put the begin tags and end
tags on separate lines to make it easier to make sure they are matched up,
and also (really getting into personal preference here) I like to swap
around the " and ' quote marks, using " as the HTML quote and ' as the
JavaScript quote:
$(this).parent().append([
     '

',
         '<input type="text" class="', inputClass, '" />',
         '<button onclick="$(this).parent().remove();return false;">',
             'x',
         '</button>',
     '

'
].join(''));
I do the quotes this way because seems a lot more common to use " in HTML
code, and because I type a lot more JavaScript quotes than HTML quotes, so
using ' for the JavaScript quotes makes it a tiny bit easier to type. :-)
-Mike

thank you guys, I really appreciate your comments and insight!

> > $('#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('') );
> I do occasionally look at the source code, but I'm still new
> enough to JavaScript that sometimes (even with 12 years of
> Java under my belt, and a whole slew of other languages going
> back some 40 years) that when I'm faced with new js
> constructs for the first time, about all I can do is stare
> glassy-eyed and go "Huh?" And that's pretty well my reaction
> to the snippet you posted below: "Huh?" :-) Would you be up
> for walking through it verbally, explaining what it's doing?
Sure thing. One way to make it easier to follow code like this is to break
it up into step-by-step instructions instead of the nested code:
// Create an array of strings.
var htmlArray = [
'<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 the array elements into a single string,
// by concatenating the original strings.
var htmlString = htmlArray.join('');

// Create a jQuery object for the element with id="exampleCA".
// Use $ as part of the variable name to remind us that
// it's a jQuery ($) object.
var $example = $('#exampleCA');

// Call the append() method of the jQuery object to
// insert the HTML text into the DOM element.
$example.append( htmlString );
Does that make it more clear? Give a shout back with any questions...
-Mike