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

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

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

Синтаксис

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

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

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

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

Вот так перед выбранными элементами будет добавлен текст, который будет возвращен пользовательской функцией:

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

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

Примеры

Пример

Давайте вставим текст перед заданным абзацем:

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

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

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

Пример

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

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

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

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

Пример

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

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

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

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

Пример

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

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

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

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