Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>Listado de peliculas desordenada</h3>
        <p id='listaDesordenada'>

    <h3>Listado de peliculas ordenado</h3>
    <ul id="lista">
    </ul>
    <script type="text/javascript">

        var listadoPeliculas = ['Hellraiser', 'Grand Torino', 'Fantastic Four', 'Elisium', 'Dr. Strange', 'Constantine', 'Buenos dias Vietnam', 'Alien'];
        //document.write('Listado de peliculas: ', listadoPeliculas, '</br>')
        var listaDesordenada =  document.getElementById('listaDesordenada')
        listaDesordenada.innerHTML = listadoPeliculas
        listadoPeliculas.sort()
        var lista =  document.getElementById('lista')
        for (var pelis = 0; pelis <= listadoPeliculas.length - 1; pelis++) {
            //document.write(listadoPeliculas[pelis] + "</br>")
            var li = document.createElement('LI')
            li.appendChild(document.createTextNode(listadoPeliculas[pelis]))
            lista.appendChild(li);
        }

        // var vToString = listadoPeliculas.toString() + "</br>"
        // document.write('Listado de peliculas:' + vToString) + "</br>";
        // document.write('Ordenadas alfabeticamente serian asi:' + "</br>");
        // document.write(listadoPeliculas.sort())
    </script>
</body>

</html>