jquery - Är det möjligt att klona HTML-elementobjekt i JavaScript?

Jag har ett HTML-element (som en select-box eller ett inmatningsfält) i en tabell. Nu vill jag kopiera objektet och skapa ett nytt från kopian, och det med JavaScript eller jQuery. Jag tror att detta borde fungera på något sätt, men jag är lite vilsen just nu.

Något som detta (pseudokod):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Svar #1

Det moderna tillvägagångssättet är att använda cloneNode-funktionen:

let new_element = element.cloneNode(true);

där Booleska värdet anger om man också ska klona dess barnnoder eller inte.

Efteråt kan du lägga till det klonade elementet i DOM någonstans. Till exempel kan du använda after() för att infoga det nya elementet precis efter det ursprungliga elementet:

element.after(new_element);

Kompatibilitet:

Webbläsarkompatibilitet för Element.after

Webbläsarkompatibilitet för Node.cloneNode

Svar #2

Med din kod kan du göra något liknande i vanlig JavaScript med hjälp av metoden 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 );

Eller använda jQuery clone()-metoden (inte den mest effektiva):

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

Svar #3

Ja, du kan kopiera barn till ett element och klistra in dem i det andra elementet:

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

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

Bevis: http://jsfiddle.net/de9kc/

Relaterade artiklar