DomBuilder – the final innerHTML killer?
We are not supposed to use the innerHTML fuction because it’s non-standard. (Why we may use xmlHttpRequest object is ofcourse because it’s soo web 2.0 :-D ). However, doing proper DOM-scripting is a true pain in the as. Those long listings of document.createElement and .add is stupid and falling back to the inlineHTML is natural.
Fortunately there are some toolkits available that aids in creating a proper DOM-fragment, Mochikit is one, and I have seen the function in some others, don’t recall their names right now tough. Many toolkits are very competent but a bit verbose, it’s ofcourse preferred to not have to double functionality just because one toolkit has a feature the other is missing and vise versa. Therfor I preferr to just go with one framework, right now it’s prototype.js, and then add the bits and bytes needed in a separate js-file just to keep the complexity down a bit.
Vivabit’s DOM Builder is such a great code snippet that will go into our general javascript utils file. Using that function you can create a complete
1 | Form |
element just like this:
1 2 3 4 5 6 7 8 9 | <br /> var html = DomBuilder.apply();</p> <p>var form = html.FORM(<br /> html.DIV(<br /> html.INPUT({type : 'text', name : 'email'}),<br /> html.INPUT({type : 'text', name : 'password'}),<br /> html.INPUT({type : 'submit'}),<br /> )<br /> );<br /> |
Rather nice, isn’t it?
