.before()

Методы .before() и .insertBefore() выполняют ту же задачу. Основное различие заключается в синтаксисе — в частности, в расположении содержимого и цели. С помощью .before(), содержимое, которое нужно вставить, поступает из аргумента метода: $(target).before(contentToBeInserted). С помощью .insertBefore(), с другой стороны, содержимое предшествует методу и вставляется перед целевым объектом, который, в свою очередь, передается в качестве аргумента метода .insertBefore(): $(contentToBeInserted).insertBefore(target).

Рассмотрим следующий HTML:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Можно создать содержимое и вставить его перед несколькими элементами одновременно:

$( ".inner" ).before( "<p>Test</p>" );

Каждый внутренний <div> элемент получает это новое содержимое:

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

Также можно выбрать элемент на странице и вставить его перед другим:

$( ".container" ).before( $( "h2" ) );

Если таким образом выбранный элемент вставляется в одно место в другом месте DOM, он будет перемещен перед целевым объектом (не клонирован):

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

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

Дополнительные аргументы

Аналогично другим методам добавления содержимого, таким как .prepend() и .after(), .before() также поддерживает передачу нескольких аргументов в качестве входных данных. Поддерживаемые входные данные включают DOM-элементы, объекты jQuery, строки HTML и массивы DOM-элементов.

Например, следующее вставит два новых <div> и существующий <div> перед первым абзацем:

var newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );

Поскольку .before() может принимать любое количество дополнительных аргументов, тот же результат можно получить, передав три <div> в качестве трех отдельных аргументов, как показано ниже: $( "p" ).first().before( $newdiv1, newdiv2, existingdiv1 ). Тип и количество аргументов в значительной степени зависят от того, как вы собираете элементы в своем коде.

• До jQuery 1.9 .before() пытался добавить или изменить узлы в текущем наборе jQuery, если первый узел в наборе не был подключен к документу, и в этих случаях возвращал новый набор jQuery вместо исходного набора. Метод мог возвращать новый результат или нет в зависимости от количества или подключенности своих аргументов! Начиная с jQuery 1.9, .after(), .before(), и .replaceWith() всегда возвращают исходный неизмененный набор. Попытка использовать эти методы для узла без родителя не оказывает никакого влияния — то есть, ни набор, ни узлы, которые он содержит, не изменяются.
• По умолчанию любой конструктор или метод jQuery, который принимает строку HTML — jQuery(), .append(), .after() и т. д. — потенциально может выполнять код. Это может произойти из-за вставки тегов script или использования атрибутов HTML, которые выполняют код (например, <img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры запроса URL, куки или входные данные формы. Это может привести к уязвимостям XSS (межсайтовый скриптинг). Удалите или экранируйте любые данные пользователя перед добавлением содержимого в документ.