Labs
Mootools wrapInner
Today I worked on a project which was using jQuery and have encountered a nifty little function called wrapInnner. What it does is wraps the html contents of the element calling it with the element that is being passed to the function. Here’s a very simple jQuery example:
<div id="user">My name is Pedro</div>
$('user').wrapInner($("<span class='red'></span>"));
will produce:
<div id="user"><span class="red">My name is Pedro</span></div>
I’ve tried doing the same in mootools using Element.wraps but it doesn’t accept html, it only accepts the id of an element or an element itself. There was no other Element method that could accomplish this task so I decided to write one. And here goes the implementation of wrapInner for Mootools:
Element.implement({
wrapInner:function(e){
this.clone(false,true).adopt(
$(e).set('html',this.get('html'))
).replaces(this);
}
});
and the same example using mootools wrapInner:
<div id="user">My name is Pedro</div>
$('t').wrapInner(new Element('span',{'class':'red'}));
will produce:
<div id="user"><span class="red">My name is Pedro</span></div>
The above implementation is very simple, it does not accept function as a parameter but it does accept an id or element.
No comments yet.