Html generation in JavaScript
Sunday, 10 June 2007, w kategoriach: Programming, JavaScript
I started playing a little bit more with JavaScript recently, and one thing that bothered me was generating HTML. For example, if you have a AJAX application of any reasonable size, it probably has to change a lot of stuff inside of the various divs or other elements as it runs. For that, you need to write a lot of ugly-looking, long-running string concatenations. So, I took an idea used by the Lisp folks or in the Ruby Markaby library and I created a library to write HTML in JavaScript. I’m not sure if I’m the first one to come up with this, but my Google-fu failed in this case, so maybe… Anyway, with my JsTemple you write something like this:
$table({cellpadding: 10},
$tr(
$td(
$div({klass: ‘container’, id: ‘main’},
$h1(‘Foobar’),
$h2(‘Foobar2′),
$h3(‘Foobar3′),
$h4(‘Foobar4′),
$h5(‘Foobar5′),
$div({id: ‘layer’, style: ‘border: solid 3px #f00; padding: 10px;’},
$p({klass: ‘foo’},
‘foo’, $strong(‘bar’)),
$p({klass: ’shmoo’},
’shmoo’))))));
And you get this:
<table cellpadding=“30″> <tr> <td> <div class=“container” id=“main”> <h1>Foobar</h1> <h2>Foobar2</h2> <h3>Foobar3</h3> <h4>Foobar4</h4> <h5>Foobar5</h5> <div id=“layer” style=“border: 3px solid #f00; padding: 10px;”> <p class=“foo”>foo<strong>bar</strong></p> <p class=“shmoo”>shmoo</p> </div> </div> </td> </tr> </table>
I generated the necessary data about tags / possible properties from HTML 4.01 W3C specification, so all the tags should work and invalid properties should be ignored. “Should”, because the generating was a little bit tricky and I’m not 100% sure if everything is the way it should be. The dollar sign is a bit annoying, too, but my goal was to avoid cluttering of the global namespace, especially a variable name like “i” may be quite popular… I don’t know how it works performance-wise or memory-wise either (certainly some optimizations are possible), but it seems to work under Firefox, Opera, Konqueror (Safari?) and MSIE 6/7 and it even doesn’t crash any of them in a short time, what I consider a big success. I don’t really know if this is useful at all (most people don’t seem to like balancing parenthesis or don’t know a decent editor which highlight pairs of matching parenthesis, judging by Lisp popularity), but you can grab it here. To start using it simply include the js file using <script>, nothing more. If you somehow find it fun, just leave a comment. Afterwards, feel free to do whatever you want with the code.
One more tip: keep in mind that jsTemple just returns a string, so you can for example use it with Prototype’s Template class.