Tuesday, April 18th, 2006

DOM Builder: A nicer DOM

Category: JavaScript, Library

We all seem to hate the DOM API. It is painful to work with for sure. Some have thrown away DOM and instead relied on innertHTML and friends to get the job down. Others feel that “It’s always seemed a bit wrong and dirty to use innerHTML to manipulate or add content to a page. It’s not a standard (more of an agreement between browser manufacturers) and it doesn’t work on some browsers with certain mime-types while the core parts of the W3C DOM spec are implemented pretty damn consistently in most modern browsers. The problem is though that it’s realllllly long winded.”

Dan Webb has put together DOM Builder, which looks a little like the Builders from Ruby (and from Groovy).

Example

The functions simply return a DOM node that you can append to whatever part of the document you like. Each function takes an number of arguments. The first argument can contain an object literal of attribute/value pairs if you need to specify attributes but if you don’t need attributes you can just leave it out. Otherwise it creates text nodes of any text you give it and appends any DOM nodes you give it. That’s it.

javascript

  1. ar html = DomBuilder.apply();
  2.  
  3. var form = html.FORM(
  4.   html.DIV(
  5.     html.INPUT({type : 'text', name : 'email'}),
  6.     html.INPUT({type : 'text', name : 'password'}),
  7.     html.INPUT({type : 'submit'}),
  8.   )
  9. );
  10.  
  11. document.body.appendChild(form);

Posted by Dion Almaer at 10:41 am
10 Comments

++++-
4.2 rating from 39 votes

10 Comments »

Comments feed TrackBack URI

Does it support CSS style attributes?

Comment by fred — April 18, 2006

I think this has been around for quite a while in script.aculo.us:
http://wiki.script.aculo.us/scriptaculous/show/Builder

Comment by Marijn — April 18, 2006

Why doesn’t someone write an innerHTML -> DOM converter utility?

That way you can just say something like:

myElement = getDOMFor(“…my markup…”)

getDOMFor takes the innerHTML as input and returns the DOM element. It may not wean people off using innerHTML but it would be a nice bridge.

Comment by David Oranchak — April 18, 2006

David, interesting concept, although it is a bit like putting the carriage before the horse. What DOM methods teach developers is to stop seeing the HTML page as a massive string but as a set of nodes.

The technicalities of the function you mentioned are pretty tough, for starters you’ll have to validate the string if it is real HTML. It is not hard for easily nested elements but something like <p>foo<strong>bar<span title="foo,baby">foo</span></strong>more foo</p> is a pain to match with regExp.

Comment by Chris Heilmann — April 18, 2006

David, why not just write a utility for converting XHTML to JS code which builds DOM using DOMBuilder, jquery or any other similar library?
XHTML parsing is quite easy with DOMParser/XMLDOM in FF/IE.
This should be faster then parsing XHTML every time on the client-side.

Comment by atany — April 18, 2006

E: Yes, it is pretty similar to the thing in Mochikit although I’ve not looked into it in detail. I wrote this before I knew about the one in Mochikit but I have creditted Mochikit in my post and I thought it was valuable to release a standalone version for people that don’t use Mochikit.

David/Chris: I agree with Chris on the point of parsing DOM Nodes from a string. It’s a bit backward.

I wrote this partly because I don’t like dealing with strings of HTML in JavaScript. The DOM Builder code is more readable and even slightly more consise than an equivilent HTML string. HTML strings are often a bit nasty looking as you need to escape quotes and JavaScript has no nice facility for multi-line strings which makes it rather messy IMO.

Comment by Dan Webb — April 18, 2006

innertHTML into innerHTML
ar html = DomBuilder.apply();
into
var html = DomBuilder.apply();
please.

Comment by R — April 19, 2006

Agree on Mochikit-independence. Mochikit does a good job, but requires 2 or 3 other files, I seem to recall around 40 or 50KB altogether, which is why I’ve been using my own tinny version of this approach.

Comment by Michael Mahemoff — April 20, 2006

[…] via ajaxian […]

Pingback by DOM-Builder - DOM-Elemente einfacher erstellen » die Netzspielwiese — April 25, 2006

[…] ajaxian.com is reporting on a bloody nice DOM node builder. […]

Pingback by » nice, simple DOM building « klog — April 25, 2006

Leave a comment

You must be logged in to post a comment.