05/13/2016   Comments Off on Copy and/or move element(s) and display elsewhere

View all snippets

In the below script, the element #shopping-cart is copied (cloned) and then appended to the element #menu-button.

jQuery(document).ready(function() {
    jQuery( "#shopping-cart" ).clone().append( "#menu-button" );

In the below script, the element #shopping-cart is moved from it’s original place in the markup to after #menu-button.

jQuery(document).ready(function() {
    jQuery( "#shopping-cart" ).after( "#menu-button" );

Here’s a guide to the right methods to use:

  • append = add the element inside just before the closing tag
  • prepend = add the element inside just after the opening tag
  • before = add the element before another element
  • after = add the element after another element