.insertBefore()

.insertBefore( target )Возвращает: jQuery

Описание: Вставить каждый элемент из набора совпавших элементов перед целевым элементом.

версия добавлена: 1.0.insertBefore( target )
- target
  
  Тип: Селектор или строка HTML или элемент или массив или jQuery
  
  Селектор, элемент, массив элементов, строка HTML или объект jQuery; набор совпавших элементов будет вставлен перед указанным элементом(ами).

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

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

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

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

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

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

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

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

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

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

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

Однако, если целевых элементов несколько, для каждого целевого элемента после первого будут созданы клоны вставленного элемента, и возвращается этот новый набор (исходный элемент плюс клоны).

До jQuery 1.9 в случае вставки в единственный элемент создавался не новый набор, а возвращался исходный, что затрудняло надежное использование метода .end() при работе с неизвестным количеством элементов.

Дополнительные замечания:

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

Пример:

Вставить все абзацы перед элементом с id "foo". То же самое, что и $( "#foo" ).before( "p" )

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertBefore demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<p>I would like to say: </p>
 
<script>
$( "p" ).insertBefore( "#foo" );
</script>
 
</body>
</html>

.insertBefore( target )Возвращает: jQuery

версия добавлена: 1.0.insertBefore( target )

Дополнительные замечания:

Пример:

Демо: