div = document.createElement('div')
div.update('<p>I like prototype</p>')
The only place I see this not working is in naughty browsers, like IE, but this seems to fix it:
div = document.createElement('div')
div = $(div)
div.update('<p>I like prototype</p>')
Maybe I'm not reading this correctly?
Justin: Element.extend
is technically only needed for IE and any other browser that won't let you modify HTMLElement.prototype
. This is why your first example works in Firefox.
For the sake of IE compliance you have to explicitly "extend" DOM nodes, using either Element.extend
or $
(which extends anything it returns). I prefer the latter because it's shorter.
Note that getElementsByClassName
and $$/getElementsBySelector
will also extend any nodes they return.
Yes I'm quite familiar with IE's reluctance to do this, but didn't really understand the *why*.
If you asked me 6 months ago, I would have told you to use calls to $() sparingly, but I'm now finding myself calling it on all the time for the very reason you stated above.
I figured $() and Element.extend() were mostly the same, but still, I've never even heard of extend() until now.
$() and Element.extend are very similar in that $() will automatically extend the element. But, it prevents a small overhead (the dollar function doesn't have to enter a loop for one element and push that one element onto an array to be returned back) and makes the code easier to understand.
I usually use
Object.prototype.createElement=function(elm){ var element=document.createElement(elm); for(var key in this) element[key]=this[key]; return element; }
My html wasn't encoded, but you get the idea.