The purpose of jQDOM is to add DOM creation functions to jQuery. With jQDOM, you can create plain vanilla DOM elements, and have them returned to variables to interact with them later, or you can create them as you go, and access them via chainability.
Download
Compressed (1.4KB)
Uncompressed (4.53KB)
Since I hate wading through pages of text just to get an example of how a plugin works, here are some very quick examples:
Chainable DOM Creation
$('body').dom('div').text('HELLO WORLD');
That example simply adds a div to your body tag, and gives it the text "HELLO WORLD".
Simple enough, right? How about something a bit more extreme.$('body')
.dom('div')
.text('Hello World!')
.css({background:'#ccc'})
.dom('a',true) //Now prepending children to our freshly created divs
.attr({href:'http://alterform.com',rel:'external'})
.click(function(){alert(this.href);return false;})
.end() //Now back to the created divs
.end() //Now back to the body
Also, the benefit of this is, that you can chain .dom() calls to each other to creation children.
Here are the parameters with explanations for each method ($.dom() and $().dom() have different parameters, so make sure not to confuse them).
Chainable Parameters
Here are the parameters for the Chainable DOM
$('SELECTOR').dom(el, prepend, children, attributes)
el: (String) This is the name of the element, such as 'div', or 'a'.
prepend: ([optional] Boolean) This is either a true or false about whether you want to append or prepend your element to it's parent. By default it is set to false (so your object is appended). Most of the time you won't need this.
children: ([optional] String or Array) This can either be the text you want inside the element, or it can be an array of children nodes you want to be in there.
Most of the time you won't need this. You can easily do this same thing with jQuery's internal functions.
attributes: ([optional] Hash) This is a key:value list of the different attributes you want your element to have. For example: {href:'http://alterform.com', rel:'nofollow'}.Most of the time you won't need this. You can easily do this same thing with jQuery's internal functions.
Let's say you want some OG DOM creation like you used to, where you pass around elements. Well, this will make it even easier!
Creating Plain Vanilla DOM Nodes:var x = $.dom('div', 'HELLO WORLD', {id:'hello_world', align:'right', 'class':'hello'});
You can now access x as a DOM node, and access it's properties like you normally would in DOM manipulation.
Now, that's cool and all, but not really the jQuery way. It's helpful if you don't know where in your DOM you're going to insert your element, but what if you already know where you're going to create your elements?
Vanilla Parameters
Here are the parameters for doing vanilla DOM creation:
$.dom(el, children, attributes, parent, prepend, replace);
el: (String) This is the name of the element, such as 'div', or 'a'.
children: ([optional] String or Array) This can either be the text you want inside the element, or it can be an array of children nodes you want to be in there.
attributes: ([optional] Hash) This is a key:value list of the different attributes you want your element to have. For example: {href:'http://alterform.com', rel:'nofollow'}
parent: ([optional] String or Object) If you want to attach your element to another object in your dom, or another object you already have built, you can pass either your DOM element, OR a jQuery selector, and your newly created element will be inserted in there.
prepend: ([optional] Boolean) This is either a true or false about whether you want to append or prepend your element to it's parent. By default it is set to false (so your object is appended)
replace: ([optional] Boolean) This is either a true or false about whether you want your element to replace everything in it's parent object, so that it is the only item there. By default, it's set to false (so things are added, rather than overwriting everything).
Feel free to contact me if you need any help, or ask away on the jQuery discussion forum. I'm always lurking around there :)