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

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

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

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

Синтаксис

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

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

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

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

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

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

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

Примеры

Пример

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

<p id="test">абзац</p>
$('#test').append('!!!');

Результат выполнения кода:

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

Пример

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

<p id="test">абзац</p>
$('#test').append('<b>!!!</b>');

Результат выполнения кода:

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

Пример

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

<p id="test">абзац</p>
$('<b>!!!</b>').appendTo('#test');

Результат выполнения кода:

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

Пример

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

<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
$('p').append(function(index, text){return index;});

Результат выполнения кода:

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