.append()

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

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

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

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

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

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

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

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

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

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

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

<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> в качестве трёх последних дочерних узлов тела:

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, файлы cookie или данные форм. Это может привести к уязвимостям XSS (межсайтового скриптинга). Удаляйте или экранируйте любые входные данные пользователя перед добавлением контента в документ.
• jQuery официально не поддерживает SVG. Использование методов jQuery в документах SVG, если для этого метода это не задокументировано, может привести к неожиданному поведению. Примерами методов, которые поддерживают SVG начиная с jQuery 3.0, являются addClass и removeClass.