jQuery is good for many things related to the DOM - both querying and manipulating. Yes, we can move elements from one position to another with the help of jQuery, or add completely new elements (as in literal HTML text strings) anywhere in the DOM just by having a selector, and if a selector applies to multiple DOM nodes then adding into multiple places can be done with one call.
jQuery provides many functions for moving or adding elements/content: after, append, appendTo, before, insertAfter, insertBefore, prepend, prependTo. Some are similarly named and do similar things but are not interchangeable: after vs insertAfter, before vs insertBefore,
jQuery functions - .after(), .append(), .before(), .prepend()
The 4 methods above take an argument of content (which can be a jQuery object which would move the DOM element of that object) and apply it to the (jQuery) object (1 or more nodes) which the method is called on. So you first get a jQuery object, usually by calling $(selector) e.g. $('#some_wrapper_id'). Then you can directly chain the method call, e.g. $('#some_wrapper_id').after($('div.move_me_around')).
Difference between jQuery's .after() and .append()
If you want to move the 'div' with class = 'move_me_around' into some 'div' with id = 'some_wrapper_id' and have it be both inside but just before the end of the closing tag of that 'some_id' div, then use .append. You are appending to the list of immediate children nodes of the specified wrapper element.
If you instead want 'move_me_around' to appear just after the closing tag of 'some_wrapper_id' then use .after().
Each of the 4 operations (prepend, before, after, append) has an equivalent whose syntax is 'reversed' in that the content or content source selector is specified first, then the operation is chained to the jQuery object and the destination object or selector is the argument to the move operation method.
| 1st | 2nd |
|---|---|
| prepend | prependTo |
| before | insertBefore |
| after | insertAfter |
| append | appendTo |
.prepend(), works like .append() but inserts your content at the front of the children node list of the specified wrapper element. .prependTo() is chained after a jQuery object created from a raw html string, and adds that string to the elements selected by the argument to .prependTo(), or the jQuery node object passed to it.
Copy div instead of move/delete
The functions above are convenient for selecting a div to move as content and then moving to a selected element. If you want to explicitly retain the original DOM element instead of moving it then you should create a deep copy of it first using .clone() and then move the clone. Example:
$( ".copy_me" ).clone().appendTo( ".some_wrapper_id" );
CSS style changes after moving
You may see that font sizes or other style of text in a moved div after calling 'appendTo' or 'insertAfter' has changed. Actually, nothing changed. The difference is how the existing CSS rules are now applied and that the moved elements will be in different classes now, or whatever which causes different rules to apply. Check the selector and rule that applied before the move and then compare the location of the same element after the move.
Note: In the examples above, I use underscores in CSS identifiers (class and ID names), whereas common accepted practice is to use hyphens in CSS, camelCase for the same things if in JavaScript, and underscores to save those things to variables in Python or PHP (snake_case).