Create address bar from a string

Question

How can I make javascript to create an html address bar from a string? example:

string: "D://Media/Musicas/"

how I want it to stay

<div class="address_bar">
    <label>
        <button class="dir" value="D://">D://</button>
        <button class="list">-></button>
    </label>
    <label>
        <button class="dir" value="D://Media/">Media</button>
        <button class="list">-></button>
    </label>
    <label>
        <button class="dir" value="D://Media/Musicas/">Musicas</button>
        <button class="list">-></button>
    </label>
</div>

Like something similar to windows or linux explorers

Answer 1

With the split method you can split the string and then create the buttons dynamically.

<div class="address_bar">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

    var path = "D://Media/Musicas";

    var arr = path.split(/\/\/|\//);

    $.each(arr, function(i, val) {
        $(".address_bar").append("<label><button class='dir'>" + val + "</button><button class='list'>-></button></label>");
    });

</script>