Три данные функции облегчают процесс оборачивания элементов в другие элементы. Все три метода принимают один параметр: либо элемент (который может быть HTML строкой, селектором CSS, объектом jQuery, или элементом DOM), или функцией, которая возвращает элемент.
Метод wrap() оборачивает каждый элемент коллекции назначенным элементом:
$('p').wrap('
'); // Все абзацы оборачиваются в div.warning
Метод wrapAll() оборачивает один элемент вокруг всех элементов в коллекции. Это означает, элементы в коллекции будут перемещены в новую секцию DOM. Они будут подняты вверх к месту, где встречается первый элемент коллекции и затем будут обернуты:
HTML перед использование метода wrapAll()
<p>
<span> . . . </span>
<span class="moveMe"> . . . </span>
<span class="moveMe"> . . . </span>
</p>
<p>
<span> . . . </span>
<span class="moveMe"> . . . </span>
<span class="moveMe"> . . . </span>
</p>
JavaScript
$('.moveMe').wrapAll(document.createElement('div'));
HTML после использования метода wrapAll()
<p>
<span> . . . </span>
<div>
<span class="moveMe"> . . . </span>
<span class="moveMe"> . . . </span>
<span class="moveMe"> . . . </span>
<span class="moveMe"> . . . </span>
</div>
</p>
<p>
<span> . . . </span>
</p>
Метод wrapInner оборачивает все внутри каждого элемента коллекции в заданный элемент:
HTML до использования метода wrapInner
<p>
<span> . . . </span>
<span> . . . </span>
</p>
JavaScript
$('p').wrapInner($('
'));
HTML после использования метода wrapInner
<p>
<div>
<span> . . . </span>
<span> . . . </span>
</div>
</p>