I'm trying to write an unobtrusive script and I don't want to add any html that's not needed unless javascript is enabled.
Using MooTools 1.2.4, is it possible to wrap a an array of elements with say for example: tags?
Desired effect:
Before:
<p>Something</p>
<p>Something1</p>
<p>Something2</p>
<p>Something3</p>
Wishful thinking javascript code:
$$('p').wrapWith(new Element('div', {id: 'master'}));
After:
<div id="master">
<p>Something</p>
<p>Something1</p>
<p>Something2</p>
<p>Something3</p>
</div>
Answered on the IRC channel. Answer added for posterity.
Iterate over the elements and use wraps
(Fiddle):
var els = $$('p'),
div = new Element('div', {id: 'master'});
els.each(function(e){ div.wraps(e) });
Or create an Element
method like wraps
that accepts Elements
instances (Fiddle):
Element.implement('surround', function(els, where){
var elements = Array.slice(els), len = elements.length;
for (var i = 0; i < len; i++){
this.wraps(elements[i], where);
}
return this;
});
new Element('div', {id: 'master'}).surround($$('p'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With