Cr.elm - innerHTML be Gone!

Javascript CreateElement Library Cr.elm

Simplifying document.createElement

Imagine you have to create a bunch of elements using javascript. Go ahead imagine it, I'll wait. Sure you could just use .innerHTML, or you could use JQuery .html - however then your HTML code string must be parsed into elements.

For the sake of elegance and simplicity and correct attachment of events you should be using document.createElement then document.body.appendChild; EXCEPT what a god awful amount of writing and lines of code and space that takes up.

Take the following example. We want to create a link. Look at all these steps! I haven't even had the time to d.setAttribute('href','#yet');

all of that just to get the equivilent of the html -- plus on older browsers the listeners won't work until after the element is appended -- plus the code does not represent the structure of HTML, there is no obvious way in which the create element and set attribute's translates to HTML. What a mess... well an elegant mess... but it's still not as nice as this:
Please note that the function doSomething must exist in order for this to work. The following HTML is created and appended to document.body with a working listner for onclick to call doSomething! You may run the above code from the javascript console, a new link will appear at the bottom of the page.
Line breaks were added to illustrate the nesting to show just how familiar the nesting of Cr.elm is to the output HTML.

You can find more info here: Create Element on GitHub

And you may create your own from raw HTML code here: HTML to Cr.elm Javascript

At some point the JSON encodings will allow for some interesting symmetry between client side and server side html template code - allowing pages to be generated either client side or server side - from the same Cr.elm encoding.

You can find more related libraries and a minified version on github