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();
javascript jquery clone elements Richard
quelle
3
stackoverflow.com/search?q=jquery+copy+element+content enthält eine Reihe verwandter Fragen.
Felix Kling

Antworten:

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