Thursday, May 17th, 2007
New Prototype DOM Builder
The Prototype team keeps going. Right after their latest 1.5.1 release the put a DOM Builder into the mix.
You can programatically great DOM nodes via:
-
-
new Element('input', { name: "user", disabled: true });
-
This code will create:
-
-
<input name="user" disabled="disabled" />
-
The name will be correctly set in IE:
Experienced coders will remember that Internet Explorer doesn't allow the name attribute to be set in a normal way. Well, we worked around that, too. This also demonstrates how boolean true as an attribute value results in repeating its name inside the value (disabled="disabled"), which is a convention of XHTML.
The Element constructor demonstrated here sets attributes by using a method that's also new: Element#writeAttributes. We should also mention that the constructor is optimized for speed when creating multiple instances of the same type. Using document.createElement() a lot to create nodes you will later manipulate with Prototype? You should use the Element constructor instead.
This is cool. I used the Builder included with Scriptaculous once but felt that it just caused me to write mode code than it was worth.
Gonna start playing around with this tonight because I needed to do a bunch of element creation on a project soon, so anything to assist would be nice.
This looks freaking awesome. Thanks!
very simple :D
Very nicely stolen from MooTools 1.1 ;-)
Schizo,
In case you haven’t noticed, the whole js community has been stealing from each other and reinventing the same old wheels for quite a while now. Let’s see…can you can spot any of the MooTools source code that actually comes from other libraries?
Michael is right. Mootools borrows from Prototype and Dean Edwards and Jquery and others. There’s a lot of unique stuff there, too, and not much is flatly derivative of other libraries, but let’s not kid ourselves here. The teams working on all these libraries are trying to solve their own problems and when there’s a solution around, like domready, there’s no reason to find another one just because someone else wrote it first.
If anything, this kind of syntactical convergence is a good thing. It means that as a developer you can move from one library to another with greater ease, it means that browser vendors like MSFT and Firefox can look at our work and see what we want out of Javascript and consider how to deliver it to us without doing it in competing ways…
I’m happy that Prototype has added this, even if I won’t be using it any time soon.
-one of the Moo guys
SchizoDuckie, as a matter of fact, this syntax was first discussed in the Prototype Core mailing list on the 5th of February, which makes it about a week before it made its way into Mootools.
Well, guys, if we’re playing Who’s On First, I might point out that a mysterious visitor to my blog named Olsow posted a DOM builder for jQuery back in June 2006 that uses essentially the same syntax.
But no worries, everybody borrows and learns from everybody. That’s how we get good at this.
Michael: I wasn’t playing “whose on first”. Just wanted to clear the fact that Prototype did not take this syntax from Mootools. That’s all.
To settle the argument, MochiKit did it first.
Actually, MochiKit uses a fairly different approach, where each DOM element is created via a function call. I should know, since I shamelessly stole that style for my own DOM creation plugin for jQuery. :-)
Nothing much to say… i simply love this way of injecting elements into dom… glad that prototype ppl adopted it ;) congrats
Thank you to the community for the few of many tools that I’ve used to accomplish things that I otherwise could not have on my own. Thanks Aaron for working on and improving Mootools so greatly, and for building the great website to support it.
Thanks everyone for the countless hours of time taking what might have started as a personal need and turning it into something that those masses less practiced in JavaScript than you could use so readily!
Damn, its slow.
I was using the Scriptaculous Builder, but found that it was slow.
On a table with 24 columns, 14 rows it took about 1.25 seconds to build, which was unacceptable.
So I saw that Prototype 1.5.2 had its own builder.
I ported to that, app worked as before, just MUCH slower.
About 5-6 seconds to build the above.
So beware, it might be fine for a little bit of building, but does not scale well. I’m on the hunt for a better DOM builder, or I’ll be back to building the big HTML string myself.
So, i create an element and then extend it by creating the object node?