Deep Clone A Set Of DOM Elements - jQuery Deepest Copy

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

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.