Deep Clone A Set Of DOM Elements - jQuery Deepest Copy
| File Size: | 4.22 KB | 
|---|---|
| Views Total: | 477 | 
| 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.










