Ist es möglich, HTML-Elementobjekte in JavaScript / JQuery zu klonen?

100

Ich suche nach Tipps, wie ich mein Problem lösen kann.

Ich habe ein HTML-Element (wie ein Eingabefeld für ein Auswahlfeld) in einer Tabelle. Jetzt möchte ich das Objekt kopieren und aus der Kopie ein neues generieren, und zwar mit JavaScript oder jQuery. Ich denke, das sollte irgendwie funktionieren, aber ich bin im Moment ein bisschen ahnungslos.

So etwas (Pseudocode):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

— Richard
quelle

3

stackoverflow.com/search?q=jquery+copy+element+content enthält eine Reihe verwandter Fragen.

— Felix Kling

60

Mit Ihrem Code können Sie so etwas in einfachem JavaScript mit der Methode cloneNode () tun :

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

Oder verwenden Sie die jQuery clone () -Methode (nicht die effizienteste):

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

— Boris Guéry
quelle

30

Es ist SEHR wichtig, die ID zu ändern, wenn Sie ein Element klonen.

— Dragos Durlut

284

Mit nativem JavaScript:

newelement = element.cloneNode(bool)

Dabei gibt der Boolesche Wert an, ob untergeordnete Knoten geklont werden sollen oder nicht.

Hier finden Sie die vollständige Dokumentation zu MDN .

— Annakata
quelle

50

beste Antwort. Verwenden Sie jquery nicht dort, wo Sie es nicht benötigen.

— Luschn

Sieht gut aus ... aber die Browserkompatibilität ist ab heute fraglich.

— Aniket Suryavanshi

13

@ AniketSuryavanshi Ich bin nicht sicher über den 4. Februar im Besonderen, aber die Kompatibilität sieht heute perfekt aus

2

IDs und Namen werden dupliziert. IDs MÜSSEN geändert werden, Namen KÖNNEN unverändert bleiben, wenn doppelte Namen erwartet werden.

— przemo_li

Schade, dass Sie alle Attribute verlieren: /

— Pieter De Bie

16

Ja, Sie können untergeordnete Elemente eines Elements kopieren und in das andere Element einfügen:

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

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

Beweis: http://jsfiddle.net/de9kc/

— Tadeck
quelle

Doppelte IDs sind ein Problem mit Ihrem Ansatz

— przemo_li

4

In jQuery ist das eigentlich sehr einfach:

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

Ändern Sie .appendTo () natürlich ...

— Philippe Leybaert
quelle

2

Sie können die clone () -Methode verwenden, um eine Kopie zu erstellen.

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

FIDDLE HIER

— Sushanth -
quelle

1

Versuche dies:

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

— Oscar Jara
quelle

0

In einer Zeile:

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

— Tamas Czinege
quelle

1

Ich denke nicht, dass dies helfen wird, da Ihr Attributwert eine Zeichenfolge ist, die sich nicht ändert.

— Jamie R Rytlewski

0

Sie müssen "# foo2" als Auswahl auswählen. Dann holen Sie es sich mit html ().

Hier ist das HTML:

<div id="foo1">

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

Hier ist das Javascript:

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

Hier ist die jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/

— Franz Noel
quelle