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

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

  • wrapInner(<HTML-элемент или DOM-элемент>) — вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов <div>.
$("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>"));
  • wrap(<HTML-элемент или DOM-элемент>) — полностью вкладывает каждый элемент коллекции в другой элемент.
$("p").wrap("<div/>");
<p>Текст 1</p>
<p>Текст 2</p>

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

<div><p>Текст 1</p></div>
<div><p>Текст 2</p></div>
  • wrapAll(<HTML-элемент или DOM-элемент>) — собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.
$("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>.

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе