function makeItem(name, price) { return { draw: function () { return "<dt>" + name + "</dt><dd>" + price + "</dd>"; } }; } function makeList(prefix, postfix) { var children = []; return { addChild: function (child) { children.push(child); }, getChildren: function () { return children; }, draw: function () { var pre = prefix || ""; var post = postfix || ""; return pre + children.map(function (child) { return child.draw(); }).join("") + post; } }; } function makeSection(name, level, prefix, postfix) { var list = makeList(prefix, postfix); var listDraw = list.draw; list.draw = function () { var tag = "h" + level; return "<" + tag + ">" + name + "</" + tag + ">" + listDraw(); }; return list; } function makeMenu() { // Create the branches. var menu = makeSection("Menu", 1); var pizza = makeSection("Pizza", 2); var basic = makeSection("Basic", 3, "<dl>", "</dl>"); var advanced = makeSection("Advanced", 3, "<dl>", "</dl>"); var sides = makeSection("Sides", 2, "<dl>", "</dl>"); var drinks = makeSection("Drinks", 2); var bottles = makeSection("Bottles", 3, "<dl>", "</dl>"); var cans = makeSection("Cans", 3, "<dl>", "</dl>"); // Set up the tree. menu.addChild(pizza); menu.addChild(sides); menu.addChild(drinks); pizza.addChild(basic); pizza.addChild(advanced); basic.addChild(makeItem("St Tropez", "£9.99")); basic.addChild(makeItem("Ploughmans", "£9.99")); basic.addChild(makeItem("Hawaiian", "£9.99")); advanced.addChild(makeItem("Rio", "£12.99")); advanced.addChild(makeItem("Texan", "£12.99")); sides.addChild(makeItem("Chips", "£0.99")); sides.addChild(makeItem("Coleslaw", "£0.99")); drinks.addChild(bottles); drinks.addChild(cans); bottles.addChild(makeItem("Coke", "£1.99")); bottles.addChild(makeItem("Diet Coke", "£1.99")); cans.addChild(makeItem("Coke", "£0.99")); cans.addChild(makeItem("Diet Coke", "£0.99")); return { draw: menu.draw }; } document.querySelector(".js-menu-draw").addEventListener("click", function () { var menu = makeMenu(); document.body.innerHTML = menu.draw(); });
<button type="button" class="js-menu-draw">Draw menu</button>