用多维数组的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