public
Last active

Sugared DOM: Better Than Templates

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
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?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.