Note to Self - Using Prototype.js to dynamically insert spans within an a tag

update: I've updated the code snippet below because blogger was stripping out some of the code (note to self, may be worth looking to a new blogging platform in 2011).

For a project where I did not have access to JQuery and had no control over the generated HTML, I found myself needing to use Prototype.js.

The goal:

Starting with a list base menu in the form below:


Make it "magically grow" span tags within the a tags:


(You might recognize this as the code used by the sliding door menu technique, which is what I needed).
I was not able to do this successfully with Prototype's .insert() and .wrap() functions, the never put the spans in the right place, the problem is compounded by smart web browsers which don't allow you to add "broken" tags dynamically via javascript see discussion of the issue in this ruby forum.

Here's what worked (I've highlight the key code
):



So I'll need to pay more attention to innerHTML.
Argh!!! this is so much easier with JQuery.