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)

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]