.prepend( содержание )
Описание: Вставляет содержимое, заданное параметром, к началу каждого элемента в наборе соответствующих элементов.
.prepend( содержание )
.prepend( function(индекс, html) )
Метод .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'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен в элемент цели (не клонирован):
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Примеры
Добавляет код HTML ко всем параграфам.$("p").prepend("<b>Hello </b>");
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").prepend("<b>Hello </b>"); }); </script> <style>p { background:yellow; }</style> </head> <body> <p>there friend!</p> <p>amigo!</p> </body> </html>

