Manipulate innerHtml on onMouseOver()

[Ron01]

I have a simple navigation bar that looks something like this:\[code\]<ul class="navigation"> <li><a href="http://stackoverflow.com/questions/13854509/index.html">Home</a></li> <li><a href="http://stackoverflow.com/questions/13854509/about.html">About Us</a></li> <li><a href="http://stackoverflow.com/questions/13854509/products.html">Products</a></li> <li><a href="http://stackoverflow.com/questions/13854509/contact.html">Contact Us</a></li></ul>\[/code\]So a very simple navigation. When a user hovers over one of the links I'd like to add squiggly brackets on either side of the link text as in:\[quote\] Home {About Us} Prodcuts Contact Us\[/quote\]The way I thought is that I could do this in javascript, adding onClick="navAnimation('TheLinkName')" on each tag. Then in the JS I just get the innerHTML of the given link tag and add the squigglys on either side of the text.Is this the best way to do it? It seems like quite alot of work for something so trivial..Thanks!