Apakah mungkin untuk mengkloning objek elemen html di JavaScript / JQuery?

Saya mencari beberapa tip tentang bagaimana menyelesaikan masalah saya.

Saya memiliki elemen html (seperti kolom input kotak pilih) dalam tabel. Sekarang saya ingin menyalin objek dan menghasilkan yang baru dari salinan, dan itu dengan JavaScript atau jQuery. Saya pikir ini harus berhasil, tetapi saya sedikit tidak mengerti saat ini.

Sesuatu seperti ini (kode semu):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Menggunakan kode Anda, Anda dapat melakukan sesuatu seperti ini dalam JavaScript biasa menggunakan metode 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 );

Atau menggunakan metode jQuery clone () (bukan yang paling efisien):

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

Dengan JavaScript asli:

newelement = element.cloneNode(bool)

di mana Boolean menunjukkan apakah akan menggandakan node turunan atau tidak.

Berikut dokumentasi lengkap tentang MDN .

Ya, Anda dapat menyalin turunan dari satu elemen dan menempelkannya ke elemen lain:

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

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

Bukti: http://jsfiddle.net/de9kc/

Ini sebenarnya sangat mudah di jQuery:

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

Ubah .appendTo () tentu saja ...

Anda dapat menggunakan metode clone () untuk membuat salinan ..

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

FIDDLE DI SINI

Coba ini:

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

Dalam satu baris:

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

Anda harus memilih "# foo2" sebagai pemilih Anda. Lalu, dapatkan dengan html ().

Ini html-nya:

<div id="foo1">

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

Ini javascriptnya:

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

Ini jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/