Có thể sao chép các đối tượng phần tử html trong JavaScript / JQuery không?

Tôi đang tìm kiếm một số mẹo về cách giải quyết vấn đề của mình.

Tôi có một phần tử html (như trường nhập hộp chọn) trong một bảng. Bây giờ tôi muốn sao chép đối tượng và tạo một đối tượng mới từ bản sao và đối tượng đó bằng JavaScript hoặc jQuery. Tôi nghĩ điều này sẽ hiệu quả bằng cách nào đó nhưng tôi hơi bối rối vào lúc này.

Một cái gì đó như thế này (mã giả):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Sử dụng mã của bạn, bạn có thể làm điều gì đó như thế này trong JavaScript đơn giản bằng cách sử dụng phương thức cloneNode () :

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

Hoặc sử dụng phương thức jQuery clone () (không phải là hiệu quả nhất):

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

Với JavaScript gốc:

newelement = element.cloneNode(bool)

trong đó Boolean cho biết có sao chép các nút con hay không.

Đây là tài liệu đầy đủ về MDN .

Có, bạn có thể sao chép phần tử con của một phần tử và dán chúng vào phần tử khác:

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

Bằng chứng: http://jsfiddle.net/de9kc/

Nó thực sự rất dễ dàng trong jQuery:

$("#ddl_1").clone().attr("id",newId).appendTo("body");

Tất nhiên là thay đổi .appendTo () ...

Bạn có thể sử dụng phương thức clone () để tạo bản sao ..

$('#foo1').html( $('#foo2 > div').clone())​;

FIDDLE TẠI ĐÂY

Thử cái này:

$('#foo1').html($('#foo2').children().clone());

Trong một dòng:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

Bạn cần chọn "# foo2" làm bộ chọn của mình. Sau đó, lấy nó bằng html ().

Đây là html:

<div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

Đây là javascript:

$("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

Đây là jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/