javascript html object model and template engine

Question

I am looking for javascript library which can do something like

var items = [1,2];
var html = div(
ul({id:"some-id", class:"some-class"})(items.each(function(item){
 return li(item);
})
);

html == "<div><ul id='some-id' class='some-class'><li >1</li><li>2</li></ul></div>"

Answer 1

Have a look at Douglas Crockford's supplant() method:

param = {domain: 'valvion.com', media: 'http://media.valvion.com/'};
url = "{media}logo.gif".supplant(param);

Answer 2

If you want to use jQuery:

var $ul = $('<ul />',{
    "class":" some-class",
    "id": "some-id"
});
$.each(items,function(index,value) {
    $('<li />').text(value).appendTo($ul);
});
$ul.appendTo($('body'))

Although in this case, you can do it in pure javascript too:

var ul = document.createElement('ul');
    ul.setAttribute('id',   'some-id');
    ul.setAttribute('class','some-class');
for(var i in items)
{
    var li = document.createElement('li');
        li.innerText = items[i];
    ul.appendChild(li);
}
document.body.appendChild(ul)

Answer 3

John Resig has a great template system. The example he uses to illustrate its capability is exactly what you want to do.

You can use a script with the following syntax to create the output you want:

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

And feed it data with the following call in javascript:

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Answer 4

So, I write it by myself.

Htmls = (function () {
    function initTag(tag, args) {
        for (var i = 0; i < args.length; i++) {
            var arg = args[i];
            if (arg.constructor == String) {
                tag.innerHTML += arg;
            }
            else if(arg instanceof HTMLElement) {
                tag.appendChild(arg);
            }
            else if (arg.constructor == Array) {
                initTag(tag, arg);
            }
            else if (arg.constructor == Object) {
                for (var j in arg) {
                    tag.setAttribute(j, arg[j]);
                }
            }
        }
        return tag;
    }

    function createTag(name, args) {
        return initTag(document.createElement(name), args);
    }

    return {
        div: function () {
            return createTag("div", arguments);
        }
    }
})();


          test("complete test", function() {
            with(Htmls){
                    var items = ["x","y"];


                    var d = div(
                        div({id:"some", class:"some-class"}, "some div"),
                        "some text",

                        items.map(function(i){
                            return div(i)
                        }));
                        equals(div(d).innerHTML, 
                        '<div><div class="some-class" id="some">some div</div>some text' 
                            + '<div>x</div><div>y</div></div>');
                }
            });