Javascript fluent html builder

The idea of generating html using javascript didn't let me go. I will remind her essence with jQuery

$( "<div>" , { "class" : "something" ,id:10})


but since readability leaves much to be desired, a small library has been implemented.

Tags, attributes, and content

// var h = Htmls .
h.div() == '<div></div>'
// .
h.div().Class( "some" ).Id(10) == '<div class="some" id="10"></div>'
// $(), .
h.div().$( "some text" ) == '<div>some text</div>'

* This source code was highlighted with Source Code Highlighter .

What is the advantage over the standard approach of template engines?

I see it in the fact that we have a set of bricks that we can assemble into something more complex and reusable.

Consider the task

var items = [1,2,3]
want to get

< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
</ ul >


')

Standard approach.

<% if (items.length) %>
< ul >
<% for ( var item in items){ %>
< li > <% = item %> </ li >
<% } %>
</ ul >
<% } %>


Not standard

function defaultUl(items){
if (!items.length)
return null ;
return h.ul(items.map( function (i){
return h.li(i);
}));
}

defaultUl(items);



Compare what we have to do with both approaches if we need another list.

Need to add something to li?

< ul >
< li id ="1" > 1 </ li >
< li id ="2" > 2 </ li >
< li id ="3" > 3 </ li >
</ ul >


No problem.

function defaultUl(items, trans){
if (!items.length)
return null ;
return h.ul(
items.map( function (i){
return trans(h.li(i),i);
}));
}
defaultUl(items, function (tag, item){
return tag.Id(item);
}



Another small example

var persons =
[{id:1,name: "First" , balance: 100},
{id:2,name: "Second" , balance: -200},
{id:3,name: "Third" , balance: 300}];



< table >
< tr >< th > Name </ th >< th > Balance </ th ></ tr >
< tr id ="1" class ="green" >< td > First </ td >< td > 100 </ td ></ tr >
< tr id ="2" class ="red" >< td > Second </ td >< td > -200 </ td ></ tr >
< tr id ="3" class ="green" >< td > Third </ td >< td > 300 </ td ></ tr >
</ table >



var tr = function (tag, items){
return h.tr(items.map( function (x){ return tag(x);}));
};

h.Head = function (){
var args = Array.prototype.slice.call(arguments);
return tr(h.th, args);
};

h.Row = function (){
var args = Array.prototype.slice.call(arguments);
return tr(h.td, args);
};

with (Htmls) {

var htmlPart = table(
Head( "Name" , "Balance" ),
persons.map( function (p){
return Row(p.name, p.balance).Id(p.id).Class(p.balance > 0 ? "green" : "red" );
}));

}




Sources

http://jshtmlbuilder.codeplex.com