Метод after - добавление текста после элемента

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

Синтаксис

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

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

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

$(селектор).after(function(номер в наборе, текущее содержимое элемента));

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

Пример

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

<p id="test">text</p> $('#test').after('!!!');

HTML код станет выглядеть так:

<p id="test">text</p>!!!

Пример

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

<p id="test">text</p> $('#test').after('<p>!!!</p>');

HTML код станет выглядеть так:

<p id="test">text</p><p>!!!</p>

Пример

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

<p id="p1">text1</p> <p id="p2">text2</p> $('#p1').after('#p2');

HTML код станет выглядеть так:

<p id="p2">text2</p> <p id="p1">text1</p>

Смотрите также

  • метод insertAfter,
    который добавляет текст после заданного элемента
  • методы before, append, prepend,
    позволяющие добавлять содержимое в определенное место на странице
  • метод clone,
    который создает копии выбранных элементов



Чат с GPT Компилятор