JavaScript / JQuery'de html öğesi nesnelerini klonlamak mümkün müdür?

Sorunumu nasıl çözeceğime dair bazı ipuçları arıyorum.

Tabloda bir html elemanım var (seçme kutusu giriş alanı gibi). Şimdi nesneyi kopyalamak ve kopyadan yeni bir tane oluşturmak istiyorum ve bunu JavaScript veya jQuery ile. Bunun bir şekilde çalışması gerektiğini düşünüyorum ama şu anda biraz fikrim yok.

Bunun gibi bir şey (sözde kod):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Kodunuzu kullanarak, cloneNode () yöntemini kullanarak düz JavaScript'te buna benzer bir şey yapabilirsiniz :

// 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 );

Veya jQuery clone () yöntemini kullanarak ( en verimli yöntem değil):

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

Yerel JavaScript ile:

newelement = element.cloneNode(bool)

Boole, alt düğümlerin klonlanıp klonlanmayacağını belirtir.

İşte MDN ile ilgili eksiksiz belgeler .

Evet, bir öğenin alt öğelerini kopyalayıp diğer öğeye yapıştırabilirsiniz:

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

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

Kanıt: http://jsfiddle.net/de9kc/

JQuery'de aslında çok kolay:

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

Elbette .appendTo () değiştirin ...

Bir kopya oluşturmak için clone () yöntemini kullanabilirsiniz ..

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

BURAYA FIDDLE

Bunu dene:

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

Tek satırda:

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

Seçiciniz olarak "# foo2" seçmeniz gerekiyor. Sonra html () ile alın.

İşte html:

<div id="foo1">

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

İşte javascript:

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

İşte jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/