.appendTo( цель )
Описание: Вставляет каждый элемент в наборе соответствующих элементов в конец цели.
.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'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен в элемент цели (не клонирован):
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> <h2>Greetings</h2> </div>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Примеры
Добавляет все блоки span к элементу с ID «foo».<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("span").appendTo("#foo"); // check append() examples }); </script> <style>#foo { background:yellow; }</style> </head> <body> <span>I have nothing more to say... </span> <div id="foo">FOO! </div> </body> </html>

