jquery вставить в конец элемента

Содержание

1. Метод: .append(content);
2. Задача 1:
3. Решение:
4. Пояснение:
5. Результат:
6. Задача 2:
7. Решение:
8. Пояснение:
9. Результат:
10. Работа с DOM
11. Работа с CSS
12. Добавление содержимого
13. Родители и потомки
14. Соседи
15. Разное
16. Работа с набором
17. Обход набора
18. Эффекты jQuery
19. Управление анимацией
20. Синтаксис
21. Примеры
22. Пример
23. Пример
24. Пример
25. Пример
26. Содержание:
27. .append( content [, content ] ) Returns: jQuery
28. Добавлен в версии: 1.0 .append( content [, content ] )
29. Добавлен в версии: 1.4 .append( function )

Метод: .append(content);

Задача 1:

— вставить в элементы li списка фразу Добавленный контент после содержащегося в элементе контента.

Решение:

Пояснение:

— Для решения задачи с помощью селектора $(‘li’) выберем все пункты списка. С помощью метода .append(‘ Добавленный контент’); в каждый пункт списка, в конец его содержимого вставляем фразу Добавленный контент.

Результат:

При загрузке страницы, к которой подключен скрипт, в конец каждого пункта li списка будет добавлена фраза Добавленный контент.

Задача 2:

— вставить в элементы p, найденные на странице, html конструкцию Добавленный контент после содержащегося в элементе контента.

Решение:

Пояснение:

— Для решения задачи с помощью селектора $(‘p’) выберем все параграфы на странице. С помощью метода .append(‘ Добавленный контент ‘); в каждый параграф, в конец его содержимого вставляем html конструкцию Добавленный контент .

Результат:

При загрузке страницы, к которой подключен скрипт, в конец каждого параграфа будет добавлена html конструкция Добавленный контент .

Работа с DOM

Работа с CSS

Добавление содержимого

Родители и потомки

Соседи

Разное

Работа с набором

Обход набора

Эффекты jQuery

Управление анимацией

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

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

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

Синтаксис

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

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

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

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

Примеры

Пример

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

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

Пример

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

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

Пример

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

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

Пример

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

Содержание:

.append( content [, content ] ) Returns: jQuery

Описание: Вставляет содержимое, заданное параметром, в конец каждого элемента в наборе соответствующих элементов

Добавлен в версии: 1.0 .append( content [, content ] )

Добавлен в версии: 1.4 .append( function )

Метод .append() вставляет указанное содержимое как последний элемент в каждом из элементов коллекции jQuery (Для вставки их первыми используйте метод .prepend() ).

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

Источник: computermaker.info