Создание 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 © 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>

Итак, вот мои вопросы:

1. если я не знаю, на сколько уровней углубляется массив, какой метод наилучшей практики для проходя через children и все великое - children?
2. вызову ли я функцию createEl() снова изнутри, чтобы создать и добавить эти дочерние элементы, если они существуют?
   • возможно ли это вообще ?
3. поможет ли это вообще, если я изменю структуру массива на это?:
   [string "type" [, json obj "attributes" [, string "text" [, array "children"]]]]
Может быть, есть лучший способ сделать это вообще, не прибегая к jQuery или тому подобному? (субъективно, но я ценю экспертные знания и опыт сообщества SO)

Заранее большое спасибо!