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>

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>

• javascript
• mootools

Share Improve this question Follow asked Dec 28, 2010 at 5:46 fivetwentysixfivetwentysix 7,49599 gold badges4242 silver badges5959 bronze badges 1

• Alternatively create a new element and append the p tags? In jQuery, it would go something like $('<div id="master" />').append('p');, I'm sure MooTools has something similar? – Tatu Ulmanen Commented Dec 28, 2010 at 5:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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'));

This seems to work:

Example: http://jsfiddle/9Pqv9/

var p = $$('p');
new Element('div',{id:'master'}).inject(p[0],'before').adopt(p);

Inject the new Element before the first p, then have it adopt the entire set of p elements.

---

Or this, which wraps the first p, then adopts the set:

Example: http://jsfiddle/9Pqv9/1/

var p = $$('p');
new Element('div', {id: 'master'}).wraps(p[0]).adopt(p);

I like keeto's example. Here a different solution:

var div = new Element('div', {id: 'master'}); 
div.inject(document.body);
$$('p').inject(div);

http://jsfiddle/tofu/9wPp5/5/

Or with a one-liner in MooTools 1.3

$$('p').inject(new Element('div#master').inject(document.body));