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.