備忘録的プログラミングリファレンス

cloneNode() メソッド

Node.cloneNode()

 .cloneNode() メソッドは、 Node オブジェクトの複製を作成するメソッドです。 引数のオプションでツリー構造も複製するかを指定できます。

 複製されただけでは表示されません。 Document オブジェクトに属する必要があります。Node.appendChild() メソッドで既存のオブジェクトに追加することで表示されます。

Node の複製
document.getElementById('list_example').cloneNode( true );
詳しくはExampleを参照してください

 複製されると元の Node の属性と値も複製されます。id属性は固有である必要がありますが、複製されてしまいます。複製後に変更する必要があるかもしれません。
 addEventListener() メソッドやスクリプトから追加されたイベントハンドラー(Element.onclick="...")は複製されません。
 <canvas>といった操作や計算で描写された画像も複製されません。

 別の Document にオブジェクトの複製を行う場合は Document.importNode() メソッドを使用します。

ページ内 Index

Syntax

in JavaScript

 返り値は Node オブジェクト。もしくは空の DocumentFragment を返します。

Node = Node.cloneNode( flgTree );

引数(Parameter Values)

Value摘要
flgTree元の Node オブジェクトのツリー構造も複製するか/否か。Boolean 型で指定

返り値(Return Values)

Type摘要
Node複製された Node オブジェクト

Example

 .cloneNode() メソッドの例です。この例では id 属性も複製されることを考慮していません。
 この例では、同じ id 属性の値をもつオブジェクトが複数コピーされます。