DOM

：

：

Node.cloneNode() メソッド

　編集：2022.10.29 by T.A.

[Edge]。→、

Node の複製を返します。

構文
Node.cloneNode([deep])
Node Node。
deep 省略可。Node の子孫ノードも複製する場合は true、しない場合は false。
注記： DOM4 の仕様では（Gecko 13.0（Firefox 13.0／Thunderbird 13.0／SeaMonkey 2.10）で実装）、deep は省略可能な引数です。省略された場合、deep には true が渡され、深い複製を生成します。浅い複製を生成するには、deep を false にする必要があります。

以前のDOMの仕様を実装しているブラウザでは、deep は必須の引数です。

戻り値

新しく生成される Node の複製。

注記／mdn

ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの（例： node.onclick = fn;）は複製されません。

cloneNode によって返される複製ノードは、Node.appendChild() や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。

deep が false に設定されていると、どの子ノードも複製されません。そのため、そのノードに含まれる Text ノードも複製されません。

deep が true に評価できる場合、サブ ツリー全体（子 Text ノードにあるテキストを含む）もコピーされます。<img> や <input> 要素などの空ノードの場合には deep を true と false のどちらに設定してもかまいません。

注意： cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。

別のドキュメントに追加するためにノードを複製する場合は、代わりに Document.importNode() を使用してください。

例
テキスト ノードの複製

HTML： 

<SPAN id=IdTest>SPAN要素。<B>B要素</B></SPAN><BR>
SPAN要素。B要素

JavaScript： 

NL=IdTest.childNodes;     //IdTest の子ノード リストを得る。
D=NL[0].cloneNode(true);  //0 番目であるテキスト ノードを複製する。
	//＝[object]：[object Text]
	//wholeText＝[string]：SPAN要素。
	//…

IdTest.appendChild(D);  //IdTest の子ノードの末尾にノードを追加。

NL[0].cloneNode(true) は cloneNode(false) でもOKでした。

SPAN要素。B要素SPAN要素。
要素ノードの複製

HTML： 

<SPAN id=IdTest>[SPAN要素。<B>[B要素]</B>]</SPAN><BR>
[SPAN要素。[B要素]]

JavaScript： 

N=IdTest.cloneNode(false);  //IdTest の複製。
D=N.outerHTML;              //＝[string]：<span id="IdTest"></span>
N.innerText="[複製要素]";   //テキスト設定。
N.id='IdTest2';             //id 名変更。
IdTest.appendChild(N);      //IdTest の子ノードの末尾に追加（文書に組み込む）。
IdTest2.style.color="red";  //装飾。文書に組み込んだので「IdTest2」が使える。
DA=IdTest.outerHTML;        //＝[string]：<span id="IdTest">[SPAN要素。<b>[B要素]</b>]<span id="IdTest2" style="color: red;">[複製要素]</span></span>

表示結果：

[SPAN要素。[B要素]][複製要素]
テスト