wrap() works just like inject(), so do this:
new Element('span', {
'class': 'clicked'
}).wraps(this);
There are two things problematic with this, however, if I'm reading between
the lines in your jsfiddle.
1. It looks like all you want to do is change the background color. You can
do this by simply setting the style or class on "this" in your onClick.
Note that because of the markup in your jsfiddle, you'll never see any UI
changes based on the new wrapper. This is because the inner element
(id='clickme') has a style on it that the wrapping span won't override. You
have to inspect the DOM to see that your example is doing anything.
2. Your click event runs every time, meaning a new element (wrapper) will
be created every time. This will eventually crash the browser by
overloading the DOM (try clicking it 10K times by firing the click event in
a loop and you'll see what I mean). You can circumvent this by checking for
existence of the new element in the onClick (ok), running
this.removeEvents() in the click event (clever, but may have side effects
if you need other event handlers), or using the "click:once" pseudo event
(elegant).
Hope this helps.
Johnny Fuery
President/Principal Engineer
Fuery Solutions -- makers of MerusCase
1736 Franklin Street, Suite 350
Oakland, CA 94612
510.550.5000 Main
925.997.3878 Mobile
510-836-0915 Fax
j...@fuery.com
On Thu, Jan 10, 2013 at 3:08 PM, 4fingers <graemek...@gmail.com> wrote:
> Thanks for your reply but I am looking to wrap the new element rather than
> inject it.
>
> For example injecting it simply adds the new element inside the div either
> at the bottom or top of the element:
> <div id="clickme">
> Click Me
> <span class="clicked"></span>
> </div>
>
> Whereas I want to wrap the element so the text is included in the new
> element:
> <div id="clickme">
> <span class="clicked">
> Click Me
> </span>
> </div>
>
> Any other ideas?
>
> Thanks
>
>
