need suggestions for iterator function in javascript dom generator

am getting rid of all innerHTML and moving to strictly generated dom. reason below. have written a simple dom generator written in javascript that saves me a lot of work and keystrokes.

the big problem I'm having is how to implement an iterator. I feel like it should spit out a series of objects, sort of like a pipe, that the enclosing environment would process, but not much joy integrating the function. here is an example of my current solution

var div = E.div( '.myClass', 's.whiteSpace:nowrap', 
  'iterator': {
  'set': { 'egg':'Scrambled Eggs', 'beer':'Chang Beer', 'yams':'Sweet Potatoes' },
  'function':function(v,l) { return E.radio({'name':'myRadio', 'value':v},l); } } }
);

generates a div with three radio buttons. the iterator functionality inside E.div pulls out each value/label pair from the "set" and passes them to the "function", then processes the results of the function - in this case the function makes a radio button.

documentation on the factory plus better examples http://code.google.com/p/chess-spider/wiki/DomFactory?ts=1302156868&updated=DomFactory

the current version of the javascript is http://code.google.com/p/chess-spider/source/browse/http/scripts/factory.js

the reason why getting rid of innerHTML (and much raw html): would 开发者_开发知识库like the object responsible for the html to generate it as well as handle the triggers for it using closure functions. very big win, and impossible to do with quoted html. this gives the entire functionality contained in a nice "object".

This is more of a pointer. It seems the you can accomplish your task more easily using a JavaScript template engine. Try Handlebars.js and here's a good overview of Handlebars.js Iteration and many other features are available