.prependTo()

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

Описание: Вставляет каждый элемент из набора совпадающих элементов в начало целевого элемента.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

Вставить все теги span в элемент с ID "foo" (См. документацию по .prepend() для получения дополнительных примеров)

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

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

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

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

Пример:

Демо: