Метод append

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

Синтаксис

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

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

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

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

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

Пример

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

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

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

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

Пример

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

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

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

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

Пример

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

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

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

html<p>text0</p>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>

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

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