The jQuery library contains many functions that allow you to manipulate the DOM nodes of a document: delete, clone, insert, move. The jQuery appendTo () function is called on an element (or set of elements). It takes as an input parameter the destination - the node where the move will be made.
The basic syntax of the jQuery appendTo method:
Call context
The method is called for a jQuery set, which can contain one or more DOM nodes. A set can be formed as a normal selector by selector:
$('span').appendTo(target); $('p.red').appendTo(target);
Also, context can be created on the fly:
$('<div>Hello, world</div>').appendTo(target); $('<i>Some text</i>').appendTo(target);
In this case, the elements are created manually, and are not selected from existing ones in the document. Nodes in the set will be moved to the end of the target element. If they are currently on the page, then the jQuery appendTo () function will cut them from the current location and move them to a new one.
If the set includes several nodes, they will be considered as a single fragment.
$('span.test').appendTo(target);
If there are three span nodes in the document with the test class, a bunch of three span elements will be inserted at the end of the target.
Target parameter
The only input parameter to the jQuery appendTo () method is the destination to insert the elements. It can be specified as a jQuery set or as a regular selector:
$('h2').appendTo($('.container')); $('p').appendTo('div');
The roaming nodes will be placed at the very end of the target element, after all its child subnodes.
If target is a jQuery-set consisting of more than one element, manipulation will be performed with each of them. In this case, the moved content is copied so that it can be duplicated in several places.
Return value
The jQuery appendTo () function returns a jQuery set of relocated items. This value is identical to the content parameter in the method signature above.
JQuery appendTo () application
An example of using the method to insert a generated node.
Original markup:
<div class="parent"> <div class="first-child">First Child</div> <div class="second-child">Second Child</div> </div>
Insert third subnode:
var child = $('<div class="third-child">ThirdChild</div>'); child.appendTo($('.parent'));
Updated markup:
<div class="parent"> <div class="first-child">First Child</div> <div class="second-child">Second Child</div> <div class="third-child">Third Child</div> </div>
Multiple insertion example.
Original markup:
<div class="container"> <div class="target"> <div class="child">Child 1</div> </div> <div class="target"> <div class="child">Child 2</div> </div> <div class="content-wrapper"> <div class="content">Content 1</div> <div class="content">Content 2</div> </div> </div>
Moving .content elements to the end of .target nodes:
$('.content').appendTo('.target');
Updated markup:
<div class="container"> <div class="target"> <div class="child">Child 1</div> <div class="content">Content 1</div> <div class="content">Content 2</div> </div> <div class="target"> <div class="child">Child 2</div> <div class="content">Content 1</div> <div class="content">Content 2</div> </div> <div class="content-wrapper"> </div> </div>
The insertion occurred in both elements with the target class, and the source place of the elements with the content class remained empty.
When working with the jQuery appendTo () method, it is important to understand the mechanics of inserting nodes and the peculiarities of manipulating sets of elements.