Copy Div Content and Clone to Another Div

The Goal:
To copy the content of a div and clone it to another div container.

Sometimes you’ll use a plugin that dynamically creates content in places you might not want it. This tutorial will let you clone that content to a new location, then remove the original so you don’t have duplicates.

Requirements:

• HTML & CSS
• jQuery

Original Post

HTML

Add this to your html document or page.

Copy From:
[cc lang=”html”]

[/cc]

Copy To:
[cc lang=”html”]

[/cc]

jQuery

Add this to your custom scripts. Make sure you have jQuery installed.

[cc lang=”javascript”]
jQuery(document).ready(function($) {

/* Clone and Append Filters to Accordion Dropdown */
var $filters = $(‘.simplefilter’);

$filters.clone().appendTo(‘.filtering-wrap’);
$filters.remove();

// Change the text to the filter that is selected
$(‘.simplefilter li’).on(‘change’, function (e){
$(‘.current-selection’).text($(this).val());
});
});
[/cc]

Alternatively if you are going to just remove the element you cloned, you can just move the element in general
[cc lang=”javascript”]
jQuery(document).ready(function($) {
$(‘.simplefilter’).appendTo(‘.filtering-wrap’);
});
[/cc]