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
# ref-for-dom-node-clonenode①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cloneNode

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support