.prependTo( цель )
Описание: Вставляет каждый элемент в наборе соответствующих элементов в начало цели.
.prependTo( цель )
Методы .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'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен в элемент цели (не клонирован):
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Примеры
Добавляет все блоки span к элементу с ID “foo”.<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("span").prependTo("#foo"); // check prepend() examples }); </script> <style>div { background:yellow; }</style> </head> <body> <div id="foo">FOO!</div> <span>I have something to say... </span> </body> </html>

