// Create a new nav element

function getNavElement(id, href, text) {

    var element = document.createElement('a');

    element.id = id;

    element.href = href;

    element.innerText = text;

    return element;

}

​

// Render the nav element

function renderNav(container, navElementData) {

    // Clear the existing container

    container.innerHTML = '';

​

    // Map over the data given

    navElementData.map(function(data) {

        // Create a new element

        var element = getNavElement(data.id, data.href, data.text);

        // Append it to the container

        container.appendChild(element);

    });

}

​

function renderReverseNav(container, navElementData) {

    return renderNav(container, navElementData.reverse());

}

​

var navElementData = [

    { id: "hHome"   , href: "index.html"  , text: "home"    },

    { id: "hAbout"  , href: "about.html"  , text: "about"   },

    { id: "hPlants" , href: "plants.html" , text: "plants"  },

    { id: "hGarden" , href: "garden.html" , text: "garden"  },

    { id: "hNews"   , href: "news.html"   , text: "news"    },

    { id: "hArticle", href: "article.html", text: "article" },

    { id: "hContact", href: "contact.html", text: "contact" }

];

​

var navMenuContainer = document.getElementById('navContainer');

var reversedNavMenuContainer = document.getElementById('reversedNavMenuContainer');

​

renderNav(navMenuContainer, navElementData);

renderReverseNav(reversedNavMenuContainer, navElementData);

​

​