domo

An interesting native approach; there have been library-based approaches to this that date back a while. Laconic (https://github.com/joestelmach/laconic) is one of the oldest that I'm aware of, and suffers from some jsquery-ness: $.el.div({'class' : 'example'}, $.el.div('content')); Pithy (https://github.com/caolan/pithy) is another; uses function syntax to get the effect of the tag name. This was discussed previously on hn, https://news.ycombinator.com/item?id=5486239 html.div('#main', [ html.h1(null, 'Hello, world!'), html.img({src: 'foo.jpg'}) ]); In that discussion, there are various other implementations of similar ideas - https://github.com/markgandolfo/el.js and https://github.com/insin/DOMBuilder and https://github.com/jed/domo and so on. el.js came to my attention a long time ago, and I ended up

I prefer https://github.com/jed/domo to create DOM elements in browser. Its output is a real DOM element whereas in pithy.js, its string.

Why not just use Domo? https://github.com/jed/domo

This is great feedback. - The caps are there to prevent global namespace collisions, since the chances of UPPERCASE global variables existing is smaller. I don't want to add lowercase names to the global, but they would be fine on the domo object itself, so maybe I should put both UPPER and lower there anyway. - The CSS may be more verbose that LESS in JavaScript, but it compiles much faster and there's only 228 of code needed to get it. If you want sugar, just use CoffeeScript and it's probably even cleaner than LESS. https://github.com/jed/domo/blob/master/docs/index.coffee#L1... - The STYLE keyword is just there because that's where the "on" function lives. You could assign it to a local variable make the reference shorter. - Yes, with bare JavaScript this is probably true, but the idea is to make sugar optional. Add your own and it lo