用多維數組的JavaScript創建HTML

正如標題所說，我正在嘗試編寫一個函數，該函數將根據我提供的數組創建一些HTML。如果陣列只是一維的，我不會有任何問題。但陣列的「多維度」是我遇到問題的地方。即，因爲它並不總是一致的。用多維數組的JavaScript創建HTML

我也應該注意到，我試圖完成這個沒有任何第三方JS庫。

例如，這裏是一個示例陣列：

var template = [ 
    ['div', {id: 'wrapper'}, [ 
     ['link', {rel:'stylesheet', href:'//mysite.com/css.css', type:'text/css'}], 
     ['header', "Look at me! I'm a header!"], 
     ['nav', {class:'main-nav'}, [ 
      ['ul', [ 
       ['li', ['a', {'href':'/home'}, "Home"]], 
       ['li', ['a', {'href':'/about'}, "About Us"]], 
       ['li', ['a', {'href':'/erase_internet.php'}, "Don't click me!"]] 
      ]] 
     ]], 
     ['section', "Some sample text!"], 
     ['footer', "Copyright &copy; 1984"] 
    ]] 
];

數組的格式爲：
[string "type" [, json obj "attributes" ][, string "text"][, array "children"]]

現在我已經有一個函數，它接受一個單個陣列對象，並創建的元素：

function createEl(type, attr, text) { 
    var key, el = d.createElement(type); 

    if (typeof attr === 'object' && !Array.isArray(attr)) { 
     for (key in attr) { 
      if (attr.hasOwnProperty(key)) { 
       el.setAttribute(key, attr[key]); 
      } 
     } 
    } 
    else if (typeof attr === 'string' && text.length > 0) { 
     el.appendChild(d.createTextNode(attr)); 
    } 

    if (typeof text === 'string' && text.length > 0) { 
     el.appendChild(d.createTextNode(text)); 
    } 

    return el; 
}

但我希望能夠處理所有的「孩子」，並把它們添加到他們的父母，通過樣品陣列指示，使輸出應該是這樣的：

<div id="wrapper"> 
    <link rel="stylesheet" href="//mysite.com/css.css" type="text/css" /> 
    <header>Look at me! I'm a header!</header> 
    <nav class="main-nav"> 
     <ul> 
      <li><a href="/home">Home</a></li> 
      <li><a href="/about">About us</a></li> 
      <li><a href="/erase_internet.php">Don't click me!</a></li> 
     </ul> 
    </nav> 
    <section>Some sample text!</section> 
    <footer>Copyright &copy; 1984</footer> 
</div>

因此，這裏有我的問題：

如果我不知道數組有多少深層次去，什麼是對通過children和所有的grand- children的遍歷最佳實踐方法？
我是否會再次調用createEl()函數來創建並附加這些子元素（如果它們存在）？
- 即使是可能嗎？
它是否有助於在所有如果我改變了數組這種結構？：
[string "type" [, json obj "attributes" [, string "text" [, array "children"]]]]
是否有可能完全這樣做的更好的方法，而不必訴諸的jQuery或類似？（主觀的，但我重視SO社區的專業知識和經驗）

非常感謝提前！

來源

2014-03-01 DondeEstaMiCulo

不要至少在模板的情況下推倒重來。看看JS – redV

的模板插件此外，這是一個很迂腐的評論，但從技術上講，你應該把'template'的第5行放在引號中，因爲它實際上是JS中的一個保留字（對不起） – user2521439

@redV - 我沒有在我的問題中提到這一點，但這對我來說是一種鍛鍊......重塑車輪有點像我在這裏拍攝的。 ;） – DondeEstaMiCulo