.prepend()

Метод .prepend() вставляет указанный контент в качестве первого дочернего элемента каждого элемента в коллекции jQuery (чтобы вставить его в качестве последнего дочернего элемента, используйте .append()).

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

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

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

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

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

Каждый <div class="inner"> элемент получает этот новый контент:

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

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

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

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

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

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

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

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

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

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

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

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