.appendTo()

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

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

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

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

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

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

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

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

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

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

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

Однако, если целевых элементов несколько, для каждого из них, кроме последнего, будут созданы клоны вставленного элемента, и будет возвращён этот новый набор (исходный элемент плюс клоны).

До jQuery 1.9 случай вставки в один элемент не создавал нового набора, а вместо этого возвращал исходный набор, что затрудняло надёжное использование метода .end() при работе с неизвестным количеством элементов.

• По дизайну, любой конструктор или метод jQuery, принимающий строку HTML — jQuery(), .append(), .after() и т. д. — потенциально может выполнять код. Это может произойти при вставке тегов сценария или использовании атрибутов HTML, которые выполняют код (например, <img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры запроса URL, куки или данные форм. Это может привести к уязвимостям межсайтового скриптинга (XSS). Удалите или экранируйте любые пользовательские данные перед добавлением содержимого в документ.
• jQuery официально не поддерживает SVG. Использование методов jQuery в документах SVG, если для этого метода это не задокументировано, может привести к неожиданному поведению. Примеры методов, которые поддерживают SVG начиная с jQuery 3.0, это addClass и removeClass.