Synopsis:

FlyDOM aims to be an easy-to-use plugin for jQuery that makes generating dynamic content quick and easy.

New Plugin Page on jQuery.com!

Since jQuery.com unveiled their new plugin wiki, I went ahead and created a new plugin page for FlyDOM. You can find this page at: http://jquery.com/plugins/project/FlyDOM.

jQuery FlyDOM 3.1.1 is here. (November 27, 2007)

• My apologies for the long delay. It has been very busy for me in my personal life. However, I have some wholesome goodness for you FlyDOMers: The ability to pass a single argument as an array. Thanks go out to Travis Cline for this addition. Awesome job! The original request was simply to allow the first element to be an array. I extended this idea to accept one element as an array, but an array that can contain more than one element.
• Thanks go to Ivan Kurmanov for the fix for this bug. Apparently, when appending a table to a container, I greedily looked for the first tbody of the container, and not the table, so adding a second table would have actually appended a new row to the first table. Awesome job, Ivan! :)

View old history

History:

FlyDOM was originally inspired by a plugin written by a guy named Oslow. At the time, I could not get his code (or the user-submitted revision) to work for me, so I decided that it would be neat if I wrote one that was more maintainable between jQuery versions. Thus, FlyDOM was created.

Features:

FlyDOM contains four chainable methods that facilitate creating layouts.

1. createAppend(string element[, object attrs[, mixed content]])
   

   Create DOM elements on the fly and automatically append them to the current DOM obejct

   Example:

   $('#exampleCA').createAppend(
       'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
           'tr', { className: 'exampleRow' }, [
               'td', { align: 'center', style: 'color: white;' }, 'I was created by createAppend()!'
           ]
       ]
   );

   Try Me  |  Remove Me
   
   
2. createPrepend(string element[, object attrs[, mixed content]])
   

   Create DOM elements on the fly and automatically prepend them to the current DOM obejct

   Example:

   $('#exampleCP').createPrepend(
       'table', { width: '718px', style: { 'borderWidth': 2, 'borderStyle': 'inset', 'border-color': '#336699' } }, [
           'tr', { className: 'exampleRow' }, [
               'td', { align: 'center', style: 'color: white;' }, 'I was created by createPrepend()!'
           ]
       ]
   );

   Try Me  |  Remove Me
   
   
3. tplAppend(json, tpl)
   

   Create DOM elements on the fly using a simple template system, and then append the new element(s) to the end of the calling object.

   Example:

   var json = { text: 'I was created by tplAppend()!' };
   var tpl = function() {
       return [
           'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
               'tr', { className: 'exampleRow' }, [
                   'td', { align: 'center', style: 'color: white;' }, this.text
               ]
           ]
       ];
   };
   
   $('#exampleTA').tplAppend(json, tpl);

   Try Me  |  Remove Me
   
   
4. tplPrepend(json, tpl)
   

   Create DOM elements on the fly using a simple template system, and then prepend the new element(s) to the beginning of the calling object.

   Example:

   var json = { text: 'I was created by tplPrepend()!' };
   var tpl = function() {
       return [
           'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
               'tr', { className: 'exampleRow' }, [
                   'td', { align: 'center', style: 'color: white;' }, this.text
               ]
           ]
       ];
   };
   
   $('#exampleTP').tplPrepend(json, tpl);

   Try Me  |  Remove Me

Conclusion:

FlyDOM's appeal is the same as jQuery’s: "write less. do more."

Tested Web Browsers:

1. Firefox 2.0
2. Internet Explorer 6.0
3. Internet Explorer 7.0 (Vista)
4. Opera 9
5. Safari 3 (Windows)

Download:

Current Version: 3.1.1 [Download]
Previous Version: 3.1.0 [Download]
Previous Version: 3.0.8 [Download]
Previous Version: 3.0.7 [Download]
Previous Version: 3.0.6 [Download]
Previous Version: 3.0.5 [Download]
Previous Version: 3.0.4 [Download]
Previous Version: 2.0.5 [Download]