jQuery Create Plugin
Download
You can download the latest version of the jQuery Create Plugin here.
Description
Having been spoiled by Jquery making everything too easy, one day while coding my site builder I decided I didn't want to generate HTML using javascript any more. I was using CSS selector syntax for formatting and querying the DOM: Why not use the same syntax for generating the DOM? This way I don't have to switch back and forth between so many grammars in my mind, in addition to the CSS seletors being generally cleaner looking and more compact. The result is the $.touch function. This function acts much like the $ function, except when it sees a CSS selector string, it creates the corrsponding DOM element. A basic usage might be to replace:
$("<p id='abc'></p>")
with
$.touch("p#abc")
This isn't miraculously shorter by any means, but we have avoided nested quotes, and the closing tag is implicit. In practice, the $.touch plugin is more convenient in another form: $(elem).touch(args) is equivalent to $(elem).append($.touch(args)).
$('body').append("<div class='header'></div>");
can now be written
$('body').touch('div.header');
"Shorthand" tags are also provided; just as jquery extends its selectors natively, so do we. We write "txt" to be the tagName of an input tag of type text:
$("<p> <input type='button' value='blue pill'/> <br/> another color: <input type='text'/> </p>");
can be written
$.touch('p').touch('btn[val="blue pill"]', 'br', ' another color', 'txt')
Note the leading space in the pure text string tells $.touch we're dealing with a text node and not an xml element. This is an ugly feature that I've added only for convenience sake.
As you can see, the $.touch does not necessarily result in a large decrease in code footprint but can make things a little cleaner. You can make it easier to
bind events and do chained jQuery commands with your elements as they are built, eliminating the need to query for them and do so later.
The idea is you JUST query them and they're generated on the fly. Please note that not all CSS selectors are supported yet. Only the selector
types used in the examples above are supported (that's the id,class and attribute selectors). A lot of the other selectors don't make sense
for generating HTML anyway. If you have any suggestions I'd love to hear from you!
[click here to download touch.jquery.js]