javascript html object model and template engine

I am looking for javascript library which can 开发者_如何学JAVAdo 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>"

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

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

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)

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);

So, I write it by myself. http://jshtmlbuilder.codeplex.com/