Page that displays topology of the directory

Question

Is there any way to do this:

  <h1>Topology</h1>
<ul><li><a href="/"> Parent Directory</a></li>
<li><a href="File1.mp4"> File1.mp4</a></li>
<li><a href="File2.mp4"> File2.mp4</a></li>
<li><a href="File3.mp4"> File3.mp4</a></li>
<li><a href="File4.mp4"> File4.mp4</a></li>
<li><a href="File5.mp4"> File5.mp4</a></li>
<li><a href="File6.mp4"> File6.mp4</a></li>
<li><a href="File7.mp4"> File7.mp4</a></li>
<li><a href="File8.mp4"> File8.mp4</a></li>
<li><a href="File9.mp4"> File9.mp4</a></li>
<li><a href="File10.mp4"> File10.mp4</a></li>

</ul>

JSFiddle: https://jsfiddle.net/wagyox71/

Is there any way to do this without listing every single file separately?

Answer 1

You can do this with JavaScript.

Create a div for the list, then use a script and an array to populate the div.

The div: <div id="myLinks"></div>

    var links = ['<a href="/"> Parent Directory</a>', '<a href =""> File1.mp4</a>', 'File2.mp4', 'etc'];
    var ul = document.createElement('ul');
    document.getElementById('myLinks').appendChild(ul);

    links.forEach(function(name){
        var li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += name;
    });

You can manually populate the links array, or do it dynamically from a directory on the site via some other call.