Содержание:
.append( content [, content ] )Returns: jQuery
Описание: Вставляет содержимое, заданное параметром, в конец каждого элемента в наборе соответствующих элементов
-
Добавлен в версии: 1.0.append( content [, content ] )
-
contentDOM элемент, текстовый узел, массив элементов или текстовых узлов, HTML строка или jQuery объект для вставки в конец каждого элемента в наборе соответствующих элементов.
-
contentОдин или более дополнительных DOM элементов, текстовых узлов и т.д. для вставки аналогично первому аргументу.
-
-
Добавлен в версии: 1.4.append( function )
-
functionФункция, возвращающая HTML строку, DOM элементы, текстовые узлы или объект jQuery, которые будут вставлены в конец каждого элемента в наборе соответствующих элементов. Получает индекс позиции элемента в наборе и старое значение HTML элемента как аргументы. Внутри функции
this
ссылается на текущий элемент в наборе.
-
Метод .append()
вставляет указанное содержимое как последний элемент в каждом из элементов коллекции jQuery (Для вставки их первыми используйте метод .prepend()
).
Методы .append()
и .appendTo()
выполняют одну и ту же задачу. Основые различия заключаются в деталях синтаксиса, в размещении содержимого и цели. У метода .append()
, выражение селектора для которого вызван методя является контейнером, в который будет вставлено содержимое. У метода .appendTo()
наоборот, новое содержимое, например выражение селектора или HTML строка созданная на лету, которое вставляется в указываемый контейнер.
Рассмотрим следующий HTML:
1
2
3
4
5
|
|
Вы можете создать содержимое и вставить его сразу в несколько элементов разом:
1
|
|
Каждый <div>
элемент с классом inner
получит новое содержимое:
1
2
3
4
5
6
7
8
9
10
11
|
|
Вы также можете выбрать элемент на стрнице и вставить его в другой:
1
|
|
Если элемент, выбранный таким способом, вставляется в одно место в другом месте DOM, то он будет просто перемещен (без клонирования):
1
2
3
4
5
|
|
Важно: Если есть больше чем один целевой элемент, то клонированные копии вставленного элемента будут созданы для каждой цели за исключением последнего.
Дополнительные аргументы
Подобно другим методам добавления контента, таким как .prepend()
и .before()
- .append()
также поддерживает передачу множественных аргументов. Поддерживаются в качестве входных параметров DOM элементы, jQuery объекты, HTML строка и массив DOM элементов.
Например, следующий код вставит два новых <div>
элемента и существующие <div>
элементы в качестве последних трех дочерних узлов body:
1
2
3
4
5
|
|
Так как метод .append()
может принимать любое количество дополнительных аргументов, то самый результат можно достигнуть передачей трех <div>
'ов как три отдельных аргумента, например так: $('body').append( $newdiv1, newdiv2, existingdiv1 )
. Тип и количество аргументов, во многомо зависят от того как Вы собираете элементв в своем коде.
Дополнительные примечания:
-
Конструктор объекта jQuery или любой метод, которые принимает HTML строку — jQuery(), .append(), .after() и другие — потенциально могут выполнить код. Это может произойти путем инъекции тэга скрипт или использования HTML аттрибутов которые выполняют код (например
<img onload="">
). Не следует использовать эти методы для вставки строки, полученной из ненадежных источников, таких как параметры запроса URL, куки или значений инпутов формы. Это может привести к уязвимости Вашего сайта перед XSS атакой. Удалите или экранируйте любой пользовательское содержимое перед вставкой его в документ. -
jQuery официально не поддерживает SVG. Использованиме методов jQuery для SVG документов, если это явно не задокументировано для этих методово, может привести к неожиданному поведению. Например в версии jQuery 3.0 есть методы с поддержкой SVG:
addClass
иremoveClass
.