• HTML
• CSS
• JS

HTML

<h3>Ordenar las frutas alfabéticamente :</h3>
<ul id="lista">
    <li>Mango</li>
    <li>Pera</li>
    <li>Plátano</li>
    <li>Fresa</li>
    <li>Sandía</li>
    <li>Uva</li>
    <li>Cereza</li>
    <li>Arándano</li>
</ul>
<button onClick="ordenar()">Ordenar >></button>

CSS

body{
    font-family:sans-serif;
}

ul{
    list-style:none;
    padding:0px;
}
li{
    display:inline-block;
    background:orange;
    margin:5px;
    padding:10px;
    color:#333;
    border-radius:3px;
}

JS

var elemUl   = document.getElementsByTagName('ul')[0]; //Se elije la primera etiqueta con ese nombre
var elemLi   = document.getElementsByTagName('li'); //Se elije todas las etiquetas con ese nombre


function ordenar(){
    
    var lista    = [];
    var listaStr = "";
    var sortArray = [];
    
    // Obtenemos los datos y lo almacenamos en un array
    for(var i=0;i<elemLi.length;i++){
        lista[i] = elemLi[i].innerText;
    }
    
    // Ordenamos con el SORT
    sortArray = lista.sort();
    
    // Concatenamos los datos en uno
    for(var i=0;i<sortArray.length;i++){
        listaStr += '<li>'+sortArray[i]+'</li>';
    }
    
    // Mostramos la lista ordenada
    elemUl.innerHTML=listaStr;    
}