Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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
@J5lx

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.