Deep Clone A Set Of DOM Elements - jQuery Deepest Copy
File Size: | 4.22 KB |
---|---|
Views Total: | 369 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery deep copy plugin that enables deep cloning of a set of DOM elements while preserving the current state.
How to use it:
1. Download and place the jq-deepest-copy.js
after loading the latest jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jq-deepest-copy.js"></script>
2. Deep copy all matched elements in the 'elements-to-copy'.
<!-- Source --> <ul class="source"> <li class="elements-to-copy"> <select name="languages" id="languages" class="form-control"> <option value="1">JavaScript</option> <option value="2">HTML5</option> <option value="3">CSS/CSS3</option> </select> </li> </ul> <!-- Destination --> <ul class="destination"> </ul>
var elements_to_copy = $('li.elements-to-copy'); var destination_container = $('ul.destination'); $(elements_to_copy).copy().appendTo(destination_container);
<!-- Results --> <ul class="destination"> <li class="elements-to-copy"> <select name="languages" id="languages" class="form-control"> <option value="1">JavaScript</option> <option value="2">HTML5</option> <option value="3">CSS/CSS3</option> </select> </li> </ul>
This awesome jQuery plugin is developed by blackirishmec. For more Advanced Usages, please check the demo page or visit the official website.