Czy można klonować obiekty elementów HTML w JavaScript / JQuery?

Szukam wskazówek, jak rozwiązać mój problem.

Mam element html (jak pole wejściowe pola wyboru) w tabeli. Teraz chcę skopiować obiekt i wygenerować nowy z kopii, a to za pomocą JavaScript lub jQuery. Myślę, że to powinno jakoś działać, ale w tej chwili jestem trochę nieświadomy.

Coś takiego (pseudo kod):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Używając swojego kodu, możesz zrobić coś takiego w zwykłym JavaScript, używając metody 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 );

Lub używając metody clone () jQuery (nie jest to najbardziej wydajna):

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

Z natywnym JavaScript:

newelement = element.cloneNode(bool)

gdzie Boolean wskazuje, czy klonować węzły potomne, czy nie.

Oto pełna dokumentacja dotycząca MDN .

Tak, możesz skopiować elementy potomne jednego elementu i wkleić je do drugiego:

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

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

Dowód: http://jsfiddle.net/de9kc/

W jQuery jest to bardzo proste:

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

Zmień .appendTo () oczywiście ...

Możesz użyć metody clone () , aby utworzyć kopię.

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

FIDDLE TUTAJ

Spróbuj tego:

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

W jednej linii:

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

Musisz wybrać "# foo2" jako swój selektor. Następnie pobierz za pomocą html ().

Oto html:

<div id="foo1">

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

Oto javascript:

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

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