Node: cloneNode() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

cloneNode()Node インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。

ノードを複製すると、固有(インライン)のリスナーを含む、ノードのすべての属性とその値が複製されます。 addEventListener() を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー(例: node.onclick = someFunction)は複製されません。さらに、 <canvas> 要素では、描画された画像は複製されません。

警告: cloneNode() を使用すると、文書内で要素の ID が重複する可能性があります。

元のノードに id 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。

また、 name 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。

異なる文書にノードを複製する場合は、代わりに Document.importNode() を使用してください。

構文

js
cloneNode()
cloneNode(deep)

引数

deep 省略可

true の場合、ノードとそのサブツリーは、子ノードの Text にあるテキストも含め複製されます。

false の場合、このノードのみが複製されます。 サブツリーは、そのノードに含まれているテキストも含め、複製されません。

なお、 deep<img><input> のような空要素には効果がありません。

返値

複製された Node を返します。 複製されたノードには、文書に所属する他のノードに Node.appendChild() などを使用して追加されるまで、親ノードがなく、文書にも所属していません。

js
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);

仕様書

Specification
DOM Standard
# ref-for-dom-node-clonenode①

ブラウザーの互換性

BCD tables only load in the browser