How To Display Breadcrumbs from Right to Left using JS?

Question

How can I display a breadcrumbs navigation menu from right to left?

e.g.:

document.title «myPage «Home

I am using the script below that displays left to right but I am unable to figure how to manipulate it correctly.

<script language="JavaScript">
<!-- 
  function breadcrumbs(){
    sURL = new String;
    bits = new Object;
    var x = 0;
    var stop = 0;
    var output = "<div class=topnav><A HREF=/>Hyperdisc</A> &raquo; ";

    sURL = location.href;
    sURL = sURL.slice(8,sURL.length);
    chunkStart = sURL.indexOf("/");
    sURL = sURL.slice(chunkStart+1,sURL.length)

    while(!stop){
      chunkStart = sURL.indexOf("/");
      if (chunkStart != -1){
        bits[x] = sURL.slice(0,chunkStart)
        sURL = sURL.slice(chunkStart+1,sURL.length);
      }else{
        stop = 1;
      }
      x++;
    }

    for(var i in bits){
      output += "<A HREF=\"";
      for(y=1;y<x-i;y++){
        output += "../";
      }
      output += bits[i] + "/\">" + bits[i] + "</A> &raquo; ";
    }
    document.write(output + document.title);
    document.write("</div>");
  }
 // -->
</script>

Which displays:

Home» myPage» document.title

Answer 1

You don't need JS for this. What you need is direction CSS property. Here is the test case http://jsbin.com/welcome/55152/edit. Support for direction property is good

The main points are:

ul {
  direction: rtl;
}
li { display: inline; }
a { display: inline-block; }

UPDATED If you absolutely have to use JS for this here is the simple snippet:

var list = document.getElementById('nav'),
    lis = document.querySelectorAll('li'),
    l = lis.length - 1,
    i,
    newList = document.createElement('ul');

for(i = l; i >= 0; i--) {
  newList.appendChild(lis[i]);
}
list.parentNode.replaceChild(newList, list);

The snippet assumes markup like:

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">myPage</a></li>
  <li>Document</li>
</ul>

Test case is here – http://jsbin.com/welcome/55163/edit

UPDATED for the actual snippet

When it comes to the actual code in the question you might want to replace everything from and including the last for() loop with this snippet:

document.write(output + document.title);
for(var i = bits.length - 1; i >= 0; i--){
  output += "&laquo; <A HREF=\"";
  for(y=1;y<x-i;y++){
    output += "../";
  }
  output += bits[i] + "/\">" + bits[i] + "</A>";
}
document.write("</div>");