Cómo generar dinámicamente una barra de navegación usando js o código de fondo

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt; head lang="es"gt;

lt; meta charset="UTF-8"gt;

lt;titlegt;lt;/titlegt;

lt;style type="text/css"gt;

li {

pantalla: bloque en línea;

ancho: 100;

alto: 30px; 30px;

}

li: activo, li: foco, .li-active {

fondo: #dddddd

color : rojo;

}

lt;/stylegt;

lt; script type="text/javascript"gt; = función () {

función removeActiveClass(nodo) {

nodo.className = '';

}

document.querySelector ('ul[id=prueba]').onclick = función (e) {

Array.prototype.forEach.call(document.querySelectorAll('ul[id=prueba] gt; li'), removeActiveClass);

var target = e.target;

target.className = 'li-active';

}

}

lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;ul id="prueba" gt;

lt;ligt;1111lt;/ligt;

lt;ligt;2222lt;/ligt;

lt;ligt;3333lt;/ligt;

lt;ligt;4444lt;/ligt;

lt;/ulgt;

lt;/bodygt;

lt;/ htmlgt;