È possibile clonare oggetti elemento html in JavaScript / JQuery?

Sto cercando alcuni suggerimenti su come risolvere il mio problema.

Ho un elemento html (come il campo di input della casella di selezione) in una tabella. Ora voglio copiare l'oggetto e generarne uno nuovo dalla copia, e questo con JavaScript o jQuery. Penso che in qualche modo dovrebbe funzionare, ma al momento sono un po 'incapace.

Qualcosa di simile (pseudo codice):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Usando il tuo codice puoi fare qualcosa di simile in JavaScript semplice usando il metodo 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 );

O usando il metodo jQuery clone () (non il più efficiente):

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

Con JavaScript nativo:

newelement = element.cloneNode(bool)

dove il valore booleano indica se clonare o meno i nodi figlio.

Ecco la documentazione completa su MDN .

Sì, puoi copiare i figli di un elemento e incollarli nell'altro elemento:

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

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

Prova: http://jsfiddle.net/de9kc/

In realtà è molto semplice in jQuery:

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

Cambia .appendTo () ovviamente ...

Puoi usare il metodo clone () per creare una copia ..

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

FIDDLE QUI

Prova questo:

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

In una riga:

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

Devi selezionare "# foo2" come selettore. Quindi, ottenerlo con html ().

Ecco l'html:

<div id="foo1">

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

Ecco il javascript:

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

Ecco il jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/