Справочник API
.appendTo() в jQuery
Содержание статьи
-
Категории: Manipulation › DOM Insertion, Inside
Перемещает все элементы набора jQuery в конец содержимого каждого элемента, определяемого с помощью входного параметра.
Синтаксис и описание:
Добавлено в jQuery 1.0.appendTo( destination )
Метод .appendTo() перемещает все элементы набора jQuery в конец содержимого каждого элемента, определяемого с помощью параметра destination (после всех его дочерних элементов). Не путать с функцией jQuery .append().
Возвращаемое значение: (объект) Набор jQuery (набор всех перемещенных элементов).
Параметры:
destination – (строка | элемент ) Селектор jQuery или ссылка на элемент DOM, определяющие место назначения.
-
Примечание:
До версии jQuery 1.3, если в качестве места назначения определены не один, а несколько элементов, то все элементы набора jQuery не перемещаются, а копируются и вставляются в конец каждого принимающего элемента, определяемого с помощью входного параметра, сами оставаясь при этом в своем прежнем местоположении.
-
Примечание:
Для того, чтобы перемещаемые элементы набора jQuery (или созданные на лету элементы DOM) становились не последними, а первыми дочерними элементами принимающего элемента (определяемого с помощью входного параметра), необходимо использовать функцию jQuery .prependTo().
Примеры:
-
<h2>Функция jQuery <b>append</b></h2> <div class="container"> <div class="inner">Вставить</div> <div class="inner">Переместить</div> </div> // Создадим на лету параграф <p>, добавим его в конец содержимого всех // элементов с классом 'inner' и переместим заголовок <h2>, вставив // его после всех дочерних элементов блока с именем класса 'container'. <script type="text/javascript"> $('<p>Test</p>').appendTo('.inner'); $('h2').appendTo($('.container')); </script>Результат:
<div class="container"> <div class="inner"> Вставить <p>элемент</p> </div> <div class="inner"> Переместить <p>элемент</p> </div> <h2>Функция jQuery <b>append</b></h2> </div> -
// Переместить все элементы <span> в конец содержимого блока с id='foo' <div>Руководство по jQuery <span>(Описание работы функций)</span></div> <div id="foo">jQuery справочник </div> <script type="text/javascript">$("span").appendTo("#foo");</script>Результат:
<div>Руководство по jQuery </div> <div id="foo">jQuery справочник <span>(Описание работы функций)</span></div>