# Метод before

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

## Синтаксис

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

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

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

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

Еще один вариант использования функции, вторым параметром задается старое html значение элемента:

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

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

## Пример

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

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

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

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

## Пример

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

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

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

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

## Пример

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

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

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

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

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

- метод `insertBefore`,
  который добавляет текст перед заданным элементом
- методы `after`, `append`, `prepend`,
  позволяющие добавлять содержимое в определенное место на странице
- метод `clone`,
  который создает копии выбранных элементов

←→
↑