Метод prepend

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

Синтаксис

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

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

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

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

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

Пример

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

html<p id="test">text</p>
javascript$('#test').prepend('!!!');

HTML код станет выглядеть так:

html<p id="test">!!!text</p>

Пример

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

html<p id="test">text</p>
javascript$('#test').prepend('<b>!!!</b>');

HTML код станет выглядеть так:

html<p id="test"><b>!!!</b>text</p>

Пример

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

html<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
javascript$('p').prepend(function(index, text) {
  return index;
});

HTML код станет выглядеть так:

html<p>0text</p>
<p>1text</p>
<p>2text</p>
<p>3text</p>
<p>4text</p>

Смотрите также

  • метод prependTo,
    который добавляет текст в начало элемента
  • методы append, before, after,
    позволяющие добавлять содержимое в определенное место
  • псевдоэлемент before,
    который добавляет текст в конец элемента на CSS