Snippets

Home / Snippets / Auto Create New Element

Auto Create New Element

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Mon. Jun. 4th, 2007 2:37 PM

1 of 1

Fordiman

createElement | JavaScript | kiss

1 comments

This is a function I created to ease headaches caused by creating and inserting new stuff in an HTML document dynamically. Essentially, it allows you to specify an HTML tag, in its entirety (attributes, styles, event handling, etc), via a single command. You can nest it, so as to create an entire element tree programmatically in a lot less time as with document.createElement.

Don't let the goofy function acronym fool you; this is damned powerful.

First, the function spec:
HTMLElement acne(type[,attributes[,styles[,events[,children[,parent[,document]]]]]]);

Arguments:

String type: type of element to create; same information as the argument of document.createElement
mixed Object attributes: attributes you want the new element to have (ie: href, src)
mixed Object styles: styles for the new element (ie: width, borderLeft)
(function|function Array) Object events: event handlers for the new element
HTMLElement|HTMLElement Array children: elements you want to be in the new element (ie: nesting is possible)
HTMLElement parent: parent node of object
HTMLDocument document: document to create element in

Return value: The newly created/configured element

function acne(type) {

        var i,t,ret,a=arguments,u='undefined',d=(typeof (t=a[6])!=u?t:document);

        ret=d.createElement(type);

                if (typeof (t=a[1])!=u && t!=null) for (i in t) ret.setAttribute(i,t[i]);

                if (typeof (t=a[2])!=u && t!=null) for (i in t) ret.style[i]=t[i];

                if (typeof (t=a[3])!=u && t!=null) for (i in t) 

                        if (t[i].length&&typeof t[i] !='function') {

                                for (j=0; j<t[i].length; j++)

                                        attach(ret,i,t[i][j]);

                        } else attach(ret,i,t[i]);

                if (typeof (t=a[4])!=u && t!=null) 

                        if (t.length)

                                for (i=0; i<t.length; i++) ret.appendChild(t[i]);

                        else

                                ret.appendChild(t);

                if (typeof (t=a[5])!=u && t!=null) t.appendChild(ret);

        return ret;

}