Question

我要尋找的JavaScript庫，它可以這樣做

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

所以，我把它寫我自己。 http://jshtmlbuilder.codeplex.com/

Answer 2

看一看道格拉斯Crockford的supplant()方法：

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

Answer 3

如果你想使用jQuery ：

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

雖然在這種情況下，你可以在純javascrip噸太：

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 4

約翰resig有一個偉大的template系統。他用來說明其能力的例子正是你想要做的。

您可以使用腳本語法如下創建輸出你想要的：

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

並通過以下調用給它的數據在javascript：

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