Метод 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,
    который создает копии выбранных элементов



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