Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Sugared DOM: Better Than Templates
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;
}() );
@mistakster

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

@neilj
Owner
neilj commented Apr 3, 2012

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.

@mistakster

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.

@eliperelman

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/

@neilj
Owner
neilj commented May 6, 2012
@J5lx
J5lx commented Nov 18, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.