JSFiddle - React, Tailwind, and code Playground

by ramsvidor

HTML

<div id="someElement" />

JavaScript

function createMenu(items) {
    var menu = document.createElement('ul'),
        i, item;

    for (i in items) {
        if (i != '__proto__' && items[i]) {
            item = document.createElement('li');

            if (typeof(items[i]) === 'object') {
                item.textContent = i;
                item.appendChild(createMenu(items[i]));
            } else {
                item.textContent = items[i];
            }

            menu.appendChild(item);
        }
    }

    return menu;
}

var menu = {
    Menu1: 'Item1',
    Menu2: {
        SubMenu1: 'SubItem1',
        SubMenu2: 'SubItem2'
    },
    Menu3: 'Item3',
    Menu4: {
        SubMenu2: {
            SubSubMenu1: 'SubSubItem1'
        }
    }
};

$('#someElement').html(createMenu(menu));