Оборачивание элементов

Теги можно оборачивать в другие теги, если у нас есть абзацы, то мы их можем дополнительно обернуть в теги <div>. Для таких вещей используется метод .wrap(), который позволяет обернуть каждый найденный элемент в указанный тег.

Обернем все абзацы с классом www тегом <div>. Для этого параметром метода передадим строку div, .wrap('div'):

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>

<script>
$('.www').wrap('div');
</script>

Параметром можно передавать не только имя тега, но и конструкцию '<div></div>', в этом случае эффект будет абсолютно такой же:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>

<script>
$('.www').wrap('<div></div>');
</script>

Можно также оборачивать теги не снаружи, а внутри. Это делается с помощью метода .wrapInner(). Параметры он принимает таким же образом, как и .wrap(), только обернет не найденные теги, а текст внутри этих тегов.

В следующем примере обернем текст внутри абзацев с классом www в тег <b>:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>

<script>
$('.www').wrapInner('b');
</script>

Можно оборачивать не каждый элемент по отдельности, а все найденные элементы вместе с помощью метода .wrapAll():

Давайте найдем все абзацы с классом www и обернем их всех в один тег <div>:

<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>

<script>
$('.www').wrapAll('div');
</script>

Если оборачиваемые элементы стоят не рядом, метод .wrapAll() сначала переместит элементы в одно место, а потом обернет их.