Stuart Colville has developed a tool for generating DOM methods from an HTML snippet called DOMTool:

The idea is that you drop a snippet of HTML in the input and the tool puts it into the document with innerHTML and then loops through that structure to generate the DOM methods needed to append that piece of HTML into a document from a script. There’s a kind of beautiful irony in using innerHTML to generate DOM methods.

I’ve added a basic compat function to handle the problem with name attributes in IE so this would need to be included in the end-user’s script should they be trying to create any elements with name attributes. This function only appears when name attributes are present in the input.

Users should also bear in mind that the ouput will not necessarily be optimal but it should be fairly easy to take the output and use it as a basis for production code.

I like the idea. Some will say, “Well, what about innerHTML?” This isnt for replacing the simple innerHTML (i use innerHTML whenever possible). Lets say you have a complex dynamically made chunk of DOM goodness and you just dont want to have to spend all the time crating the dom. You drop it in, then pick out the peaces you need.

Comment by Mario — November 30, 2006

I was actually thinking of writing something like this myself. Guess that I don’t have to now.

Comment by Andy — November 30, 2006

Very interesting! That is quite something. ;)

I’m personally a fan of cloning HTML templates, (grabbing a collection of nodes and using cloneNode(true),) which would also work with the HTML-based approach given here. (This was used extensively for Yahoo! Photos and worked quite well.)

You may still have to modify each instance slightly for your uses, but the structure would be left intact – and that saves you a lot of time. It’s also very simple if someone wants to modify your template structure, since it’s HTML! I’ve learned over the years that it seems best to leave HTML where it works best (as HTML), and not to create big complex structures of it using Javascript (but cloning and extending/customising with JS where appropriate.)

Sounds a lot like Jack yui-ext DOMHelper object (www.jackslocum.com) which does this and supports templated building of repeating elements. He also has a blog post about performance of innerHTML vs this type of approach.

Comment by Tim — November 30, 2006

This is neat. I was thinking of writing something like this myself. Ideally, one should be able to do dojo like attachpoints inside the html via annotations, and have the code create equivalent variables that are visible externallly. This will then be a simpler static version of dojoj widgets..

Comment by Vijay Chakravarthy — November 30, 2006

One drawback is not being able to assign JS vars to elements as they are created. I much prefer the approach published by Michael Geary and inspired by MochiKit.DOM:

Actually, James, with DOMTool you can save references to the objects as they are created. In fact, it looks like the generated code creates a unique variable name for each DOM element, so you are all set.

Mine also allows you to save references to inner objects. If you wanted the inner A element from my example, you’d do this: