-
-
Save neilj/1532562 to your computer and use it in GitHub Desktop.
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; | |
}() ); |
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/
What conditions have to be met to use this in own projects?
Beware of using this in production if you need to support IE.
style
attribute doesn't work — you need to set attributecssText
instead. http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.htmlid
andclass
doesn't functioning properly — the.split()
method doesn't preserve the delimiters. http://blog.stevenlevithan.com/archives/cross-browser-split