Вложение элементов

Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы.

$("div").wrapInner("<b></b>");
<div>Текст 1</div>
<div>Текст 2</div>

Результат будет выглядеть следующим образом.

<div><b>Текст 1</b></div>
<div><b>Текст 2</b></div>

Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.

$("div").wrapInner(document.createElement("b"));

Можно также передать элемент, созданный с помощью функции $().

$("div").wrapInner($("<b></b>"));
$("p").wrap("<div/>");
<p>Текст 1</p>
<p>Текст 2</p>

Результат выполнения:

<div><p>Текст 1</p></div>
<div><p>Текст 2</p></div>
$("p").wrapAll("<div/>");
<b>Какой-то текст 1</b>
<p>Текст 1</p>
<b>Какой-то текст 2</b>
<p>Текст 2</p>
<b>Какой-то текст 3</b>
<p>Текст 3</p>

Результат будет выглядеть следующим образом.

<b>Какой-то текст 1</b>
<div><p>Текст 1</p><p>Текст 2</p><p>Текст 3</p></div>
<b>Какой-то текст 2</b>
<b>Какой-то текст 3</b>

Как видно из примера все элементы коллекции были перемещены после первого элемента и размещены внутри тега <div>.

Предыдущая статья Все статьи Следующая статья