Метод appendTo в jQuery: вставка елементів

Бібліотека jQuery містить безліч функцій, які дозволяють маніпулювати DOM-вузлами документа: видаляти, клонувати, вставляти, переміщати. Функція jQuery appendTo() викликається для елемента (або набору елементів). Вона приймає в якості вхідного параметра пункт призначення - вузол, куди буде вироблено переміщення. Базовий синтаксис методу jQuery appendTo:

Контекст виклику

Метод викликається для jQuery-набору, в якому може містити один або кілька DOM-вузлів. Набір може бути сформований як звичайна вибірка по селектору:

$('span').appendTo(target);
$('p.red').appendTo(target);

Також контекст може бути створений на льоту:

  $(' 

').appendTo(target);
$(' Some text ').appendTo(target);

У цьому випадку елементи створюються вручну, а не вибираються серед вже існуючих в документі. Вузли, що входять в набір, будуть переміщені в кінець елемента target. Якщо вони в даний момент знаходяться на сторінці, то функція jQuery appendTo() виріже їх з поточного місця і перемістить на нове.

Якщо у набір входить декілька вузлів, вони будуть розглядатися як єдиний фрагмент.

   $('span.test').appendTo(target);  

Якщо в документі три вузла span з класом test, в кінець target буде вставлена зв'язка з трьох елементів span.

Параметр target

Єдиний вхідний параметр методу jQuery appendTo() - пункт призначення для вставки елементів. Він може бути вказаний як jQuery-набір або ж як звичайний селектор:

  $('h2').appendTo($('.container')); 
 $('p').appendTo('div');  

Переміщуються вузли будуть розміщені в самому кінці елемента target, після всіх його дочірніх підвузлів.

Якщо target являє собою jQuery-набір, що складається більш ніж з одного елемента, маніпуляція буде проведена з кожним з них. У цьому випадку переміщуваний вміст копіюється, щоб можна було продублювати його в декількох місцях.

Обчислене значення

Функція jQuery appendTo() повертає jQuery-набір, що складається з переміщених елементів. Це значення ідентично параметру content у наведеній вище сигнатурі методу.

Застосування jQuery appendTo()

Приклад використання методу для вставки згенерованого сайту.

Початкова розмітка:

Вставка третього підвузла:

  var child = $(' 

');
child.appendTo($('.parent'));

Оновлена розмітка:

Приклад множинної вставки.

Початкова розмітка:

Переміщення елементів .content у кінець вузлів .target:

  $('.content').appendTo('.target');  

Оновлена розмітка:

Вставка сталася в обидва елемента з класом target, а вихідне місце елементів з класом content залишилося порожнім. При роботі з методом jQuery appendTo() важливо розуміти механіку вставки вузлів і особливості маніпуляцій з наборами елементів.