javascript - JQuery copy/append element, base object removed

Question

Trying to clone base element li.table-field-base to variable clonedItem, change some attributes and data on the new element and then append it to sortable list ul#tablefield-order-sortable. The result is that the element is appended, but the base element is removed, though i did copy it first. How could i keep the base element, so i can use it later again?

Following is the piece of relevant code that does the copying/appending part:

    var clonedItem = $.extend({}, $('li.table-field-base'));
    $('#tablefield-order-sortable').append(clonedItem);
    $('#tablefield-order-sortable').sortable();

Thanks in advance guys!

Answer 1

You didn't really clone the element, you cloned the object containing the element.
To clone DOM nodes in jQuery, you use clone()

var clonedItem = $('li.table-field-base').clone();
$('#tablefield-order-sortable').append(clonedItem);
$('#tablefield-order-sortable').sortable();