Метод .after() добавляет текст после заданного элемента. Также существует метод .insertAfter(), который работает аналогичным образом (отличие в способе применения, см. примеры).

См. также методы before, append, prepend.

См. также урок основы работы с jQuery для более полного понимания.

Синтаксис

Вставка текста после элемента:

$(селектор).after(текст)

В методе insertAfter просто меняется местами текст и селектор:

текст.insertAfter(селектор)

Вот так после выбранных элементов будет добавлен текст, который будет возвращен пользовательской функцией. В первый параметр этой функции попадает номер в наборе каждого из выбранных элементов (по очереди):

$(селектор).after(function(номер в наборе))

Текст также может быть не только обычным текстом, но и DOM элементом или объектом jQuery. В этом случае эти элементы переместятся со своей позиции в HTML коде.

Примеры

Пример

Давайте вставим текст после заданного абзаца:

<p id="test">абзац</p>
$('#test').after('!!!');

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

<p id="test">абзац</p>!!!

Пример

Давайте вставим текст с тегами после заданного абзаца:

<p id="test">абзац</p>
$('#test').after('<p>!!!</p>');

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

<p id="test">абзац</p><p>!!!</p>

Пример

Решим предыдущую задачу с помощью метода .insertAfter():

<p id="test">абзац</p>
$('<p>!!!</p>').insertAfter('#test');

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

<p id="test">абзац</p><p>!!!</p>

Пример

Давайте переместим один абзац под другой (то есть вырежем абзац со старого места и поставим в новое):

<p id="p1">абзац 1</p>
<p id="p2">абзац 2</p>
$('#p1').after('#p2');

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

<p id="p2">абзац 2</p>
<p id="p1">абзац 1</p>