Will’s posterous

The same action keeps coming up in my javascript. I want to create more than one element, then bind an action on click, and then add them to some other element without ereasing the content already in that element. I know 4 ways to accomplish this.

1. elementCreate each element, use .click to bind each, then .append each element as an object
2. .append the elements as a string, then bind each by $('') search {ei $('#examples").click(doSomething); } 
3. set up a $("#ids").live(). .append elements as a string //learned this just a few hours ago
4. elementCreate the elements, bind each. then use appendTo {eg $( [element1, element2]).appendTo('#where they go");

I am very new to all of this and also very confused. There are many thigns I don't know.

•  is $('a') any different than document.elementCreate('a').
• is $([el1, el2]).appendTo("#place") any different than $("#place").append(el1).append(el2);
• it seems appending with a string is loads faster then with an element. and it's also signficantly faster to join an array then concatenate strings. But I'm not in any large enough loop to care. Though in general, I'm not in any loops. So performance isn't that much of an issue...but knowing is!
• $('#') must search the DOM for all matches. Is that intensive enough to warrant creating an element so there is no search. Then one has to append/prepend/appendTo an element instead of a string. Can a string be assocated with bindings?
• Does .live() require significant resources on a DOM update?
• How are elements refrenced by functions? by jQuery? are they copied, based by refrence, etc?

Most importantly, I haven't read up on how to actually profile these cases for myself. And, even if I knew that, I don't know what test cases would yeild meaningful results. Could one method be better for small documents but terrible for big ones. I don't even know how to judge the size!

Loading mentions Retweet