web-dev-qa-db-ja.com

JavaScript / JQueryでhtml要素オブジェクトを複製することはできますか？

私は自分の問題を解決する方法に関するいくつかのヒントを探しています。

テーブルにhtml要素（選択ボックス入力フィールドなど）があります。ここで、オブジェクトをコピーして、コピーから新しいオブジェクトを生成し、JavaScriptまたはjQueryを使用して生成します。これは何らかの形で機能するはずですが、現時点では少し無知です。

次のようなもの（擬似コード）：

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();
javascriptjquerycloneelements
90
Richard

コードを使用すると、 cloneNode（） メソッドを使用して、プレーンJavaScriptで次のようなことができます。

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

または、jQuery clone（） メソッドを使用します（最も効率的ではありません）：

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

ネイティブJavaScriptの場合：

newelement = element.cloneNode(bool)

ブール値は、子ノードを複製するかどうかを示します。

MDNの完全なドキュメント 。

276
annakata

はい、1つの要素の子をコピーして、他の要素に貼り付けることができます。

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

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

証明： http://jsfiddle.net/de9kc/

16
Tadeck

JQueryでは実際に非常に簡単です。

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

もちろん.appendTo（）を変更...

3
Philippe Leybaert

clone（）メソッドを使用してコピーを作成できます。

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

ここにFIDDLE

2
Sushanth --

これを試して：

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

セレクタとして「＃foo2」を選択する必要があります。次に、html（）で取得します。

Htmlは次のとおりです。

<div id="foo1">

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

Javascriptは次のとおりです。

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

Jsfiddleは次のとおりです。 http://jsfiddle.net/fritzdenim/DhCjf/

0
Franz Noel

1行で：

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