.append()


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

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

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

    • content
      Тип: htmlString или Element или Text или Array или jQuery
      DOM элемент, текстовый узел, массив элементов или текстовых узлов, HTML строка или jQuery объект для вставки в конец каждого элемента в наборе соответствующих элементов.
    • content
      Тип: htmlString или Element или Text или Array или jQuery
      Один или более дополнительных DOM элементов, текстовых узлов и т.д. для вставки аналогично первому аргументу.
  • Добавлен в версии: 1.4.append( function )

    • function
      Тип: Function( Integer index, String html ) => htmlString или Element или Text или jQuery
      Функция, возвращающая HTML строку, DOM элементы, текстовые узлы или объект jQuery, которые будут вставлены в конец каждого элемента в наборе соответствующих элементов. Получает индекс позиции элемента в наборе и старое значение HTML элемента как аргументы. Внутри функции this ссылается на текущий элемент в наборе.

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

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

Рассмотрим следующий HTML:

1
2
3
4
5
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

Вы можете создать содержимое и вставить его сразу в несколько элементов разом:

1
$( ".inner" ).append( "<p>Test</p>" );

Каждый <div> элемент с классом inner получит новое содержимое:

1
2
3
4
5
6
7
8
9
10
11
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>

Вы также можете выбрать элемент на стрнице и вставить его в другой:

1
$( ".container" ).append( $( "h2" ) );

Если элемент, выбранный таким способом, вставляется в одно место в другом месте DOM, то он будет просто перемещен (без клонирования):

1
2
3
4
5
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>

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

Дополнительные аргументы

Подобно другим методам добавления контента, таким как .prepend() и .before() - .append() также поддерживает передачу множественных аргументов. Поддерживаются в качестве входных параметров DOM элементы, jQuery объекты, HTML строка и массив DOM элементов.

Например, следующий код вставит два новых <div> элемента и существующие <div> элементы в качестве последних трех дочерних узлов body:

1
2
3
4
5
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

Так как метод .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.

Примеры:

Добавляет некий HTML ко всем параграфам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Я хочу сказать: </p>
<script>
$( "p" ).append( "<strong>Привет</strong>" );
</script>
</body>
</html>

Демонстрация:

Добавляет элементы ко всем параграфам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Я хочу сказать: </p>
<script>
$( "p" ).append( document.createTextNode( "Привет" ) );
</script>
</body>
</html>

Демонстрация:

Добавляет объекты jQuery (аналогично массиву DOM элементов) ко всем параграфам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<strong>Привет мир!!!</strong>
<p>Я хочу сказать: </p>
<script>
$( "p" ).append( $( "strong" ) );
</script>
</body>
</html>

Демонстрация: