Documentation

Plugins/SuperFlyDOM

From jQuery JavaScript Library

Jump to: navigation, search

Create DOM elements on the fly and automatically append or prepend them to another DOM object.

Also included are template functions (tplAppend and tplPrepend) that can take a JSON-formatted HTML structure, apply a dataset, and create complex DOM nodes! New template system is much more forgiving and flexible than previous DOM element creation plugins.

Format rules*
  • All arguments besides the first are optional.
  • Data must begin with a string; string may be tagname, text, or inline HTML.**
  • Attribute object can only following corresponding tagname.
  • Attribute object follows JSON + jQuery format (i.e. style attributes must be camelCase'd and conform to DOM spec).
  • Children of element must be wrapped in (one) array, including text.
  • Children array may follow element string or attributes object.

No empty strings, objects, or arrays are needed! However, if one is inserted SuperFlyDOM stays cool, man.

*This format is entirely backwards compatible with Sean's jquery-dom.js (Oslow's template format). To adapt from FlyDOM format, simply place all child text nodes INSIDE the children array. **Technically strings must be encapsulated in double- (not single-) quotes to conform to JSON spec.

Advanced
Templating allows our content to be created in several ways, from AJAX'd JSON data, user input, or through internal methods. With the addition of the liveQuery plugin and one line of code, SuperFlyDOM events can be monitored, so that every template-created DOM structure acts just like the first one. (More on this for 1.0...)

Also, all SuperFlyDOM functions work on plain DOM elements as well as jQuery-wrapped element-objects. This means you can create a DOM element and give it children with SuperFlyDOM before adding the element to the document. (This is how createPrepend works internally.)

SuperFlyDOM should be less complicated (faster?) than all current inline Templating functions, i.e. FlyDOM, jTemplate and MetaObjects. Also, it is unobtrusive and will not break validation.

API





NameType
createAppend( element, attributes, children )Returns: jQuery
The method that you use to create & append a new DOM tree.
createPrepend( element, attributes, children )Returns: jQuery
The method that you use to create & prepend a new DOM tree.
tplAppend( target, template )Returns: jQuery
The method that you use to map a set of key/value pairs to a template & append a new DOM tree from the result.
tplPrepend( target, template )Returns: jQuery
The method that you use to map a set of key/value pairs to a template & prepend a new DOM tree from the result.