Invertir una lista usando Javascript

Hace un rato estaba desarrollando un sitio y me encontré con un indeseado efecto. Cuando posicionaba mi menú, el cual es una lista desordenada, se me invertían los elementos. El menú se suponía debía quedar as:
Home | About Us | Contact
Pero quedaba así:
Contact | About Us| Home

La razón de ese efecto es muy simple. Al posicionar mi menú estoy usando float: right, ya que quiero que este quede alineado a la derecha. Lo que sucede entonces es que me toma el primer elemento (HOME) y lo posiciona a la derecha del siguiente elemento (About Us) de modo que nos queda About Us | (Home). Luego posiciona About Us a la derecha del siguiente elemento (Contact) quedando: Contact | About Us | Home

La solución más sencilla, y por la que muchos novatos y no tan novatos habrían optado, es invertir la lista desordenada, pasando de:

<ul id="menu">
    <li><a href="index.php" title="Go to the home page">HOME</a></li>
    <li><a href="about.php" title="Read about Bilt-Tuff">ABOUT US</a></li>
    <li><a href="contact.php" title="View our contact information and contact form">CONTACT</a></li>
</ul>

a

<ul id="menu">
    <li><a href="contact.php" title="View our contact information and contact form">CONTACT</a></li>
    <li><a href="about.php" title="Read about Bilt-Tuff">ABOUT US</a></li>
    <li><a href="index.php" title="Go to the home page">HOME</a></li>
</ul>

De modo que al ser flotados, los elementos se posicionaran en el orden correcto. Sin embargo, nosotros, los experimentados🙂 , sabemos que no es buena idea modificar el XHTML para lograr dicho efecto. La razón del por que no es buen idea es por que eso nos desacomoda todo el enmarcado poniéndolo en orden inverso. Esa no es una buena idea. El enmarcado debe estar siempre en el orden correcto para asegurar un fácil manejo, mantenimiento y actualización del proyecto.

Yo opte por usar Javascript como solución. Hice esta sencilla función:

function invertir(){
            var menu = document.getElementById('menu');
            var nuevoOrden = new Array();
            for(i=0, j=menu.getElementsByTagName('li'); j[i]; i++){
                var liActual = j[j.length - (i+1)];
                nuevoOrden.push(liActual);
            }
            menu.innerHTML = "";
            for(i=0; nuevoOrden[i]; i++){
                menu.innerHTML += "<li>" + nuevoOrden[i].innerHTML + "<\/li>";
            }
        }

Es función se ejecuta cuando la página termina de cargarse. Todavía está en etapa de desarrollo, pero es un buen comienzo para algo más grande. La expongo aquí por si pueda servir como inspiración o base para algún otro proyecto. Si empiezas a hacer algo basado ya sea en la idea de la función o la función me gustaría saberlo. Quizá podamos compartir ideas.

Lo único que esa función hace es tomar el ultimo elemento de la lista, lo guarda en un array de modo que el último elemento en la lista es el primero en el array, luego toma el penúltimo elemento de la lista y lo guarda en la segunda posición del array y así sucesivamente permitiéndonos invertir los elementos. Luego “limpia” la lista e inserta en ella los elementos que han sido invertidos y guardados en el array.

La funcion usa Javascript en bruto por ahora, pero el proyecto final usará la delicadesa y presicion del DOM.