How to create a menu using only javascript code
<p>Ever since I started programming on NetBeans, I had to create a HTML menu for every page that I used which is starting to be very time-consuming because if I have many pages, I have to go back and edit back each to be updated. This is how my menu looks at the moment with HTML:</p>

<pre><code>            &lt;ul class="sidebar-menu"&gt;
            &lt;li class="header"&gt;MAIN NAVIGATION&lt;/li&gt;
            &lt;li class="treeview active"&gt;
            &lt;a href="#"&gt;
                &lt;i class="fa fa-edit"&gt;&lt;/i&gt; &lt;span&gt;Projects&lt;/span&gt;
                &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;ul class="treeview-menu"&gt;
                &lt;li class="active"&gt;&lt;a href="offers.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Offers&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="mobilecarriers.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Mobile Carriers&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="affiliatepixel.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Affiliate Pixel Tracking&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="carrierip.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Carrier IP&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="UpdtConvStats.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Update Conversion Status&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="GetConvData.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Get Conversions Data&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="UpdtConv.html"&gt;&lt;i class="fa fa-circle-o"&gt;&lt;/i&gt;Update Conversions P/R&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
</code></pre>

<p>Now in order to avoid having a repeated menu on all pages, I want to create a menu using only Javascript code. I have already tried to build but it doesn't exactly reach the objective that I am aiming; for example: I need to have icons before the text and all it shows is a DOT for all of them, I also need to create sub-menus but I haven't exactly found a way to do it. Can anyone tell me if this code works for my purpose? If not, can anyone help me please?</p>

<pre><code>(function(){

var dirs=window.location.href.split('/'),
cdir=dirs[dirs.length-2];

var dir_ofertas = "";
var dir_teste = "";

if (cdir === "Ofertas") {
    dir_teste = '../teste/';      
}

else if (cdir === "teste") {
    dir_ofertas = '../Ofertas/';        
}
var navItems = [
    {href: dir_ofertas + 'offers.html', text: 'Offers'},
    {href: dir_ofertas + 'mobilecarriers.html', text: 'Mobile Carriers'},
    {href: dir_teste + 'index.html', text: 'Test'}
];

var navElem = document.createElement("nav"),
    navList = document.createElement("ul"), 
    navItem, navLink;

navElem.appendChild(navList);

for (var i = 0; i &lt; navItems.length; i++) {
    navItem = document.createElement("li");
    navLink = document.createElement("a");
    navLink.href = navItems[i].href;
    navLink.innerHTML = navItems[i].text;
    navItem.appendChild(navLink);
    navList.appendChild(navItem);
}
navList.children[0].className = "current";

window.onload = function () {
    document.getElementById('leftNav').appendChild(navElem);
};

}());
</code></pre>