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:


  1. new Element('input', { name: "user", disabled: true });

This code will create:

  1. <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.

Posted by Dion Almaer at 12:19 am

4.3 rating from 41 votes


Comments feed TrackBack URI

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.

Comment by Philip Plante — May 17, 2007

This looks freaking awesome. Thanks!

Comment by Trevor — May 17, 2007

very simple :D

Comment by eburhan — May 17, 2007

Very nicely stolen from MooTools 1.1 ;-)

Comment by SchizoDuckie — May 17, 2007


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?

Comment by Michael — May 17, 2007

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

Comment by Aaron Newton — May 17, 2007

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.

Comment by Tobie Langel — May 17, 2007

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.

Comment by Tobie Langel — May 17, 2007

To settle the argument, MochiKit did it first.

Comment by Dean Edwards — May 18, 2007

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. :-)

Comment by Michael Geary — May 18, 2007

Nothing much to say… i simply love this way of injecting elements into dom… glad that prototype ppl adopted it ;) congrats

Comment by nagaozen — May 18, 2007

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!

Comment by Jeff McDonald — May 31, 2007

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.

Comment by Dino Fancellu — July 19, 2007

So, i create an element and then extend it by creating the object node?

Comment by Coder — October 29, 2007

Leave a comment

You must be logged in to post a comment.