DOM creation with $E

Anthony Lieuallan (consummate greasemonkey hacker) has posted a new technique for creating DOM elements - Dollar-E . The function takes its $X name from the functions of the prototype library, but other than that it is designed to be standalone and looks to be cross-browser. It's fairly similar to MochiKit's createDOM et al, but instead of three arguments, it takes a single structured argument.

In most situations this is a completely insignificant difference - in Anthony's comments ecmanaut (good name!) suggests MochiKit is more elegant, but I'd disagree, elegance is in the eye of the beholder and all that.

Consider the following example:

//Common setup
var rows = [
["dataA1", "dataA2", "dataA3"],
["dataB1", "dataB2", "dataB3"]
];
row_display = function (row) {
return TR(null, map(partial(TD, null), row));
}

//Mochikit table
var mochiTable = TABLE({'class': 'prettytable'},
THEAD(null, row_display(["head1", "head2", "head3"]) ),
TFOOT(null, row_display(["foot1", "foot2", "foot3"]) ),
TBODY(null, map(row_display, rows) )
);

//Dollar-E equivalent
var dollarTable = $E{
tag : 'table',
class : 'prettytable',
children : [
  { tag : 'thead', children: row_display(["head1", "head2", "head3"]) },
  { tag : 'tfoot', children: row_display(["foot1", "foot2", "foot3"]) },
  { tag : 'tbody', children: map(row_display, rows) },
]
};

Which do you prefer? I personally think the dollar-e method is more explicit about the structure.

Also if you want to generate element properties and its children/contents from the same model objects, dollar-e is much easier to use as you can use a single function rather than being forced to write two functions like with mochikit. Consider the following very contrived example

//Common setup
var data = { name : "name", value : "value" }; //fake model object

// Mochikit example
function make_properties(data){
return {id : data.name};
}
function make_data(data){
return data.value;
}
var mochiElement = DIV(make_properties(data), make_data(data));

//dollar-e example
function make_object(data){
return { tag: "DIV",
         id : data.name,
         children: data.value };
}
var dollarElement = $E(make_object(data));

It gets even worse for mochikit if you want to derive the tag name from the data object as well, as you would need three functions. This use-case and the previous one perhaps aren't too common, but dollar-e is just as good at the 90% use-case so I think it will replace mochikit's DOM methods for me, just because it is more flexible.

In summary - well done Anthony good piece of code.