Sugared DOM: Better Than Templates

gistfile1.js

var el = ( function () {

var doc = document;

var directProperties = {
    'class': 'className',
    className: 'className',
    defaultValue: 'defaultValue',
    'for': 'htmlFor',
    html: 'innerHTML',
    text: 'textContent',
    value: 'value'
};

var booleanProperties = {
    checked: 1,
    defaultChecked: 1,
    disabled: 1,
    multiple: 1,
    selected: 1
};

var setProperty = function ( el, key, value ) {
    var prop = directProperties[ key ];
    if ( prop ) {
        el[ prop ] = ( value == null ? '' : '' + value );
    } else if ( booleanProperties[ key ] ) {
        el[ key ] = !!value;
    } else if ( value == null ) {
        el.removeAttribute( key );
    } else {
        el.setAttribute( key, '' + value );
    }
};

var appendChildren = function ( el, children ) {
    var i, l, node;
    for ( i = 0, l = children.length; i < l; i += 1 ) {
        node = children[i];
        if ( node ) {
            if ( node instanceof Array ) {
                appendChildren( el, node );
            } else {
                if ( typeof node === 'string' ) {
                    node = doc.createTextNode( node );
                }
                el.appendChild( node );
            }
        }
    }
};

var splitter = /(#|\.)/;

var create = function ( tag, props, children ) {
    if ( props instanceof Array ) {
        children = props;
        props = null;
    }
    
    var parts, name, el,
        i, j, l, node, prop;
    
    if ( splitter.test( tag ) ) {
        parts = tag.split( splitter );
        tag = parts[0];
        if ( !props ) { props = {}; }
        for ( i = 1, j = 2, l = parts.length; j < l; i += 2, j += 2 ) {
            name = parts[j];
            if ( parts[i] === '#' ) {
                props.id = name;
            } else {
                props.className = props.className ?
                    props.className + ' ' + name : name;
            }
        }
    }
    
    el = doc.createElement( tag );
    if ( props ) {
        for ( prop in props ) {
            setProperty( el, prop, props[ prop ] );
        }
    }
    if ( children ) {
        appendChildren( el, children );
    }
    return el;
};

return create;

}() );

Beware of using this in production if you need to support IE.

1. Creation with the style attribute doesn't work — you need to set attribute cssText instead. http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html
2. Creation of elements with the id and class doesn't functioning properly — the .split() method doesn't preserve the delimiters. http://blog.stevenlevithan.com/archives/cross-browser-split

Correct, although to clarify, issue one only applies to IE7 and below and issue two is only IE8 or below. I don't support IE7 or lower, but for those that do you can easily modify the setProperty method. For IE8 I include, via conditional comment, Stephen Levithan's fix for its buggy cross browser split method. Wherever possible I prefer to patch the browser rather than clutter core code.

Sure. My warnings mostly addressed to the guys who want to use it in their projects.

By the way, I'm very inspired of your el function and benchmarks. Thanks, Neil.

Using instanceof is not a recommended way to check whether a value is an array. http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/

Unless you're using multiple frames, instanceof works perfectly and is faster than using the Object.prototype.toString method. Obviously, if you are calling this method from a different frame and passing an array created within the iframe, then the instanceof check won't work. If this situation applies to you though, you also probably want to add an (optional) extra argument to pass in the document object for the frame you want to create the elements for; at the moment this is captured in the closure to be the document where the script is originally loaded.

What conditions have to be met to use this in own projects?