從多維數組使用JavaScript創建HTML

Question

就像標題所說的那樣，我正在嘗試編寫一個函數，該函數將根據我提供的數組創建一些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和所有的grand-的children ？
2. 如果存在這些子元素，我是否會再次從內部調用createEl()函數來創建和附加這些子元素？
   • 那有可能嗎？
3. 如果我將數組的結構更改為這個，那完全有幫助嗎？
   [string "type" [, json obj "attributes" [, string "text" [, array "children"]]]]
4. 是否有一種更好的方法可以完全做到這一點，而不必求助於jQuery之類的工具？ （主觀，但我重視SO社區的專業知識和經驗）

提前謝謝了！

Answer 1

1. 您將需要以遞歸方式設置createEl。 因此，如果您有較深的孩子，則將為這些孩子遞歸觸發該功能。

2. 是的，看1。

3. 您的偏好。

4. 我不認為，但不確定，jQuery是否會為您提供任何好處。 我的建議是查找遞歸如何作為一個想法，並將其應用於JavaScript語法。

入門的好地方