尋找從JSON/object構建DOM客戶端的JS庫

Question

乍看之下，可能看起來我正在尋找一個簡單的JS模板引擎，但我所尋找的是更復雜的。起初我想自己編碼，但我想的更多，但我無法想象這種情況以前沒有做過。

簡單地說：我正在尋找的東西，將採取以下對象文字，並建立以下的HTML。

{ 
    tagName : 'div', 
    className : 'container', 
    children : 
    [ 
     { 
      tagName : 'h1', 
      className : 'page-title', 
      text  : 'My Awesome Page!' 
     }, 
     { 
      tagName : 'a', 
      className : 'class-i-gave-to-this-link', 
      text  : 'Check out my other awesome page!', 
      attr  : 
      { 
       href: 'http://my.awesome-page.com/' 
      } 
     } 
    ] 
} 

期望中的結果HTML：

<div class="container"> 
    <h1 class="page-title">My Awesome Page!</h1> 
    <a class="class-i-gave-to-this-link" href="http://my.awesome-page.com/">Check out my other awesome page!</a> 
</div> 

Answer 1

這是我在一個遞歸解決裂縫：

var jsonToHtml = function(node) { 
    var tag = document.createElement(node.tagName); 
    tag.className = node.className || ""; 
    if(node.text) { 
     tag.innerHTML = node.text; 
    } 
    if(node.children) { 
     for(var i = 0; i < node.children.length; i++) { 
      tag.appendChild(jsonToHtml(node.children[i])); 
     }     
    } 
    if(node.attr) { 
     for(var key in node.attr) { 
      tag.setAttribute(key, node.attr[key]); 
     }    
    } 
    return tag; 
}; 

這裏是一個jsFiddle