Comments on: Html generation in JavaScript

By: Riddle

Riddle — Sun, 10 Jun 2007 22:48:39 +0000

Great post and approach, thanks.

But as a matter of fact, there are existing solutions for issue you’ve raised. I browsed through jQuery’s plugins repository and found few examples:

Easy DOM creation
LISP-style DOM creation
And another one

I haven’t had a chance to use them in projects, but I will surely do - this creation looks amazingly easy. I’m also going to download yours and give it a try - it’s nice to have simple standalone script sometimes.

By: medyk

medyk — Sun, 10 Jun 2007 23:29:56 +0000

Ha!.. I’m working on template engine for php which use very similar syntax :)
Generally I prefer to work on DOM objects than on text.. all is so much clearer and easier to manage

By: stiff

stiff — Mon, 11 Jun 2007 04:25:32 +0000

Riddle: I thought that someone already did that, thanks for the links :) But after looking at the sources, I’m also happy to admit that my library is better than the ones you pasted - it implements the whole HTML specification, while the other libraries either allow you to use only a subset of HTML tags or don’t do any validation of the stuff you create at all. I also like my syntax better…

medyk: Working on DOM objects is often a better approach, but when you have bigger amounts of stuff to generate it’s nice to have a “tighter” syntax for this task.

By: medyk

medyk — Mon, 11 Jun 2007 15:27:20 +0000

yeah stiff.. all I meant by my comment is that I prefer to work on DOM objects and to make things easier I’m working on template engine that uses syntax very similar to what you’ve proposed above

By: Vinyanov

Vinyanov — Fri, 24 Aug 2007 08:45:43 +0000

But your code clutters the window namespace. Some of the Riddle’s examples try to represent all markup in a single structure. I also wondered what it could look like. I thought that we could exploit the case-sensitiveness of properties, so that a name-value pair with an upper-case key would represent name of the structure and its value and lower-case properties would describe attributes. You know: {TITLE : ‘Contents’, title : ‘Attribute’}. Values may contain arrays of other values, objects, strings, whatever. It doesn’t seem that wrong, I guess:

{TABLE:{TR:{TD:[
{H1 : ‘Title’},
{H2 : ‘Subtitle’},
{DIV : [ {P: [’One’, {STRONG: ‘and a half’}]},
{P: ‘Two’}, ‘Three’, 4
],
‘id’ : ‘content’,
‘class’ : ‘content’,
’style’ : {
padding : 10,
border : ’solid 30px red’,
margin : 0.2
}
}
]
}}}

Single toHTML implemented in the Object prototype would then suffice to generate all code. By the way, if you have any properties heteronymous with JavaScript keywords, you can enclose them with string delimiters and use them safely in object literals: {’for’ : ‘example’} :)

And style attribute represented through an object would be a nice extra. Integers could represent pixels, floats - percents etc. Oh no, wait, JavaScript doesn’t see the difference, does it?

By: stiff

stiff — Sat, 25 Aug 2007 07:41:02 +0000

Yes, I had some remorse about cluttering the global namespace, but I didn’t found a better way to implement things with a syntax I would like, and the whole idea was to make it s-expish ala Lisp, which implies using functions. This is also the reason I used the “$” prefix, to avoid any name clashes, because I don’t use it in normal code, nor my libraries do.

One thing I found really lacking in this solution is the inability to manipulate the template after it was created. Things get messy when there is some more complicated logic behind setting up various parts of the template.