Метод .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>