cpp

Добавление содержимого перед элементом или после него

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

  • after(<Выражение>[, <Выражение>]) — добавляет <Выражение> после всех элементов коллекции. В качестве параметра может быть указан HTML-код, текст, DOM-элемент, коллекция элементов jQuery или массив. Для примера добавим HTML-код после элемента с идентификатором div1:
<div id="div1">Текст</div>
$('#div1').after('<u>Новый текст</u>');

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

<div id="div1">Текст</div><u>Новый текст</u>

Теперь добавим DOM-элемент:

$('#div1').after( $('<u>Новый текст</u>').get(0) );

А теперь добавим созданный элемент коллекции jQuery:

$('#div1').after( $('<u>Новый текст</u>') );

Можно указать сразу несколько значений через запятую или в виде массива:

$('#div1').after([' 4', ' 5', ' 6'], [' 7'])
          .after('1', ' 2', ' 3');

Если передать ссылку на существующий в документе элемент, то он будет перемещен:

<div id="div2">Текст</div>
<div id="div1">Текст</div>
$('#div1').after( $('#div2') );

Результат:

<div id="div1">Текст</div><div id="div2">Текст</div>

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Через второй параметр доступно значение текущего элемента в формате HTML. Функция должна вернуть значение, которое нужно добавить. После абзацев добавим выделенный индекс абзаца внутри документа:

<p>Абзац 1</p>
<p>Абзац 2</p>
$('p').after( function(i, v) {
   return '<div><b>индекс ' + i + '</b></div>';
});

Результат:

<p>Абзац 1</p><div><b>индекс 0</b></div>
<p>Абзац 2</p><div><b>индекс 1</b></div>
  • before(<Выражение>[, <Выражение>]) — добавляет <Выражение> перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, текст, DOM-элемент, коллекция элементов jQuery или массив. Метод полностью идентичен методу after(), за исключением того, что добавляет <Выражение> не после элемента, а перед ним. Для примера добавим HTML-код перед элементом с идентификатором div1:
<div id="div1">Текст</div>
$('#div1').before('<u>Новый текст</u>');

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

<u>Новый текст</u><div id="div1">Текст</div>

В качестве параметра можно также указать ссылку на функцию. Перед абзацами добавим выделенный индекс абзаца внутри документа:

<p>Абзац 1</p>
<p>Абзац 2</p>
$('p').before( function(i, v) {
   return '<div><b>индекс ' + i + '</b></div>';
});

Результат:

<div><b>индекс 0</b></div><p>Абзац 1</p>
<div><b>индекс 1</b></div><p>Абзац 2</p>
  • insertAfter(<Параметр>) — добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному параметру. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Для примера добавим HTML-код после элемента с идентификатором div1:
$('<u>Новый текст</u>').insertAfter('#div1');

Результат будет таким же, как и при использовании метода after():

$('#div1').after('<u>Новый текст</u>');
  • insertBefore(<Параметр>) — добавляет коллекцию элементов jQuery перед всеми элементами, соответствующих указанному параметру. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Для примера добавим HTML-код перед элементом с идентификатором div1:
$('<u>Новый текст</u>').insertBefore('#div1');

Результат будет таким же, как и при использовании метода before():

$('#div1').before('<u>Новый текст</u>');

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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

cpp