Listing keys/urls returned from S3 buckets (HTML5/PHP)

Question

I am getting keys from a directory in an Amazon S3 bucket. Some of these keys are of video that have gone through the elastic transcoder. The format of the keys look like:

OwnerName/video/Wildlife_123abcABC/HLS_1M_.m3u8

OwnerName/video/Wildlife_123abcABC/HLS_2M_.m3u8

OwnerName/video/Wildlife_123abcABC/HLS_400K_.m3u8

OwnerName/video/Wildlife_123abcABC/123abcABC.mp4

OwnerName/image/someImage.png

What I want to happen is to display the keys on a webpage using Javascript and HTML using li. Ultimately, I want it to look like this:

OwnerName
|-->video
|------>Wildlife_123abcABC
|---------->HLS_1M_.m3u8
|---------->HLS_2M_.m3u8
|---------->HLS_400K.m3u8
|---------->123abcABC.mp4
|-->image
|------>someImage.png

As far as my code goes, this is what it currently looks like:

function displayURL(url, fileName){
    var filePath  = fileName.split("/");
    var type      = filePath[1];
    content       = fileName.split(".");
    var ext       = content[content.length - 1];

    var li        = [];
    var a         = [];

    //var li          = document.createElement('li');
    //var a           = document.createElement('a');

    for(var i = 0; i < filePath.length; i++){
        li[i] = document.createElement('li');
        a[i] = document.createElement('a');

        li[i].className  = "file";
        li[i].id = filePath[i];
        //a[i].href       = url;
        a[i].innerHTML = filePath[i]+"</br>";
        li[i].appendChild(a[i]);
    }

    //li.className  = "file";
    //a.href      = url;
    //a.innerHTML = fileName+"</br>";
    //a.innerHTML   = url+"</br>";
    //li.appendChild(a);

    switch(type){
        case 'image':
            var img = document.createElement("img");
            img.src = url;
            img.width = 100;
            img.height = 100;
            li.appendChild(img);

            _("url_image").appendChild(li);
            break;
        case 'video':
            if((ext != "ts") && (ext != "png"))
                for(var j = 0; j < filePath.length; j++){
                    if(j === 0)
                        _("url_video").appendChild(li[j]);
                    else
                        li[j-1].appendChild(li[j]);
                }
            break;
        default:
            _("url_other").appendChild(li);
            break;
    }
}

So far, I have only been focusing on getting the video portion to work.

Jerry

video

Wildlife_eaQUuiN7aBKzAfC

HLS_1M_.m3u8

Jerry

video

Wildlife_eaQUuiN7aBKzAfC

HLS_2M_.m3u8

Jerry

video

Wildlife_eaQUuiN7aBKzAfC

HLS_400K_.m3u8

Jerry

video

Wildlife_eaQUuiN7aBKzAfC

eaQUuiN7aBKzAfC.mp4

Jerry

video

supercat_Ta8QbSUnQW5WlqF

HLS_1M_.m3u8

Jerry

video

supercat_Ta8QbSUnQW5WlqF

HLS_2M_.m3u8

Jerry

video

supercat_Ta8QbSUnQW5WlqF

HLS_400K_.m3u8

Jerry

video

supercat_Ta8QbSUnQW5WlqF

Ta8QbSUnQW5WlqF.mp4