Метод prepend

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

См. также методы append, before, after.

См. также псевдокласс before, который добавляет текст в конец элемента на CSS.

См. также урок основы работы с jQuery для более полного понимания.

Синтаксис

Вставка текста в начало элемента:

$(селектор).prepend(текст)

В методе prependTo просто меняется местами текст и селектор:

текст.prependTo(элементы)

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

$(селектор).prepend(function(номер в наборе, текущее содержимое элемента))

Текст также может быть не только обычным текстом, но и DOM элементом или объектом jQuery. В этом случае эти элементы переместятся со своей позиции в HTML коде.

Примеры

Пример

Давайте вставим текст в начало заданного абзаца:

<p id="test">абзац</p>

$('#test').prepend('!!!');

<p id="test">!!!абзац</p>

Пример

Давайте вставим текст с тегами в начало заданного абзаца:

<p id="test">абзац</p>

$('#test').prepend('<b>!!!</b>');

<p id="test"><b>!!!</b>абзац</p>

Пример

Решим предыдущую задачу с помощью метода .prependTo():

<p id="test">абзац</p>

$('<b>!!!</b>').prependTo('#test');

<p id="test"><b>!!!</b>абзац</p>

Пример

Давайте найдем все абзацы и в начало каждому из них поставим его порядковый номер в наборе:

<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>

$('p').prepend(function(index, text){return index;});

<p>0абзац</p>
<p>1абзац</p>
<p>2абзац</p>
<p>3абзац</p>
<p>4абзац</p>