JavaScript　要素を複製するcloneNodeの使い方

JavaScriptのcloneNodeメソッドを使用してHTML要素を複製する方法を解説します。

HTML要素を複製する方法ってありますか？

cloneNodeメソッドを使用することで要素を複製することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

cloneNodeメソッドとは

　cloneNodeメソッドは、指定された要素の複製を作成するメソッドです。
このメソッドは、指定された要素のツリー構造全体を複製します。

node.cloneNode(deep)

deep：子孫ノードまで複製するか

nodeは複製する要素を指定するノードオブジェクトで、deepは複製する階層を指定する真偽値です。

この真偽値がtrueの場合、複製元の要素とその子孫要素を全て複製します。falseの場合は、複製元の要素のみを複製します。deepが省略された場合、デフォルトはfalseです。

cloneNodeメソッドの使い方

cloneNodeメソッドは、以下のように使用します。
以下のようなHTML要素があるとします。

<div id="example">
  <p>Hello, world!</p>
</div>

この要素を複製するには、次のようにします。

const original = document.getElementById('example');
const cloned = original.cloneNode(true);

　この場合、idが “example” の div 要素が複製され、その下に含まれるすべての要素も複製されます。true パラメーターを指定することで、子要素も含めた全体が複製されます。

一方、以下のようにfalseを指定すると、複製元の要素のみが複製されます。

const original = document.getElementById('example');
const cloned = original.cloneNode(false);

この場合、idが “example” の div 要素のみが複製され、その下に含まれる p 要素は複製されません。

cloneNodeメソッドを使って複製した要素は、元の要素と同じ属性を持ちますが、イベントリスナーやデータなどの状態は複製されません。複製された要素を別の要素に追加する場合は、appendChildなどのメソッドを使用して、ドキュメント内の別の要素に追加する必要があります。

cloneNodeのサンプルプログラムを使った解説

以下のサンプルプログラムは、idが “example” の div 要素を複製して、新しい要素を body 要素に追加します。

<div id="example">
  <p>Hello, world!</p>
</div>

const original = document.getElementById('example');
const cloned = original.cloneNode(true);
document.body.appendChild(cloned);

このコードを実行すると、以下のようなHTMLコードが生成されます。

<body>
  <div id="example">
    <p>Hello, world!</p>
  </div>
</body>

　この例では、元の要素がid属性を持っていたため、複製された要素も同じid属性を持っています。このため、複製した要素がドキュメント内の別の場所に追加されても、元の要素と異なる動作をすることはありません。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

cloneNodeメソッドを使用してHTML要素を複製する方法を解説しました。

cloneNodeメソッドは、要素を複製するために使用します。
cloneNodeメソッドには、複製元の要素とその子孫要素を全て複製するかどうかを指定する真偽値があり、省略された場合はデフォルトでfalseになります。
複製された要素は、元の要素と同じ属性を持ちますが、イベントリスナーやデータなどの状態は複製されません。
複製された要素を別の要素に追加する場合は、appendChildなどのメソッドを使用して、ドキュメント内の別の要素に追加する必要があります。

cloneNodeメソッドは、要素を複製する際に重宝しそうです。

cloneNodeメソッドは、要素を複製するための基本的なメソッドの1つです。要素を複製することで、ユーザーによる操作によって元の要素が変更されてしまうことを防ぐことができます。

また、cloneNodeメソッドを使用することで、要素を再利用することができ、コードの可読性や保守性を向上させることができます。