instance method Element#wrap
Element#wrap(wrapper[, attributes]) → Element
-
wrapper
(Element
|String
) – An element to wrapelement
inside, or else a string representing the tag name of an element to be created. -
attributes
(Object
) – A set of attributes to apply to the wrapper element. Refer to theElement
constructor for usage.
Wraps an element inside another, then returns the wrapper.
If the given element exists on the page, Element.wrap
will wrap it in
place — its position will remain the same.
The wrapper
argument can be either an existing Element
_or_ a
string representing the tag name of an element to be created. The optional
attributes
argument can contain a list of attribute/value pairs that
will be set on the wrapper using Element.writeAttribute
.
Examples
Original HTML:
<table id="data">
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
JavaScript:
// approach 1:
var div = new Element('div', { 'class': 'table-wrapper' });
$('data').wrap(div);
// approach 2:
$('data').wrap('div', { 'class': 'table-wrapper' });
// Both examples are equivalent — they return the DIV.
Resulting HTML:
<div class="table-wrapper">
<table id="data">
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
Warning
Using Element.wrap
as an instance method (e.g., $('foo').wrap('p')
)
causes errors in Internet Explorer when used on textarea
elements. The
wrap
property is reserved on textarea
's as a proprietary extension to
HTML. As a workaround, use the generic version instead
(Element.wrap('foo', 'p')
).
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.