cloneNode は、既存の要素をコピーして新しい要素を作るメソッドです。複雑な構造の要素を複製したいときに便利です。
基本的な使い方
element.cloneNode(deep) で要素を複製します。引数 deep で、子要素も含めるかを指定します。
const original = document.getElementById('template'); // 浅いコピー（子要素を含まない） const shallow = original.cloneNode(false); // 深いコピー（子要素も含む） const deep = original.cloneNode(true);
浅いコピーと深いコピー
<div id="template"> <h2>タイトル</h2> <p>説明文</p> </div>
cloneNode(false)
外側の div だけがコピーされる。中身は空
cloneNode(true)
div と中の h2、p もすべてコピーされる
実際に動かしてみよう
テンプレートを複製してリストに追加します。
HTML
CSS
JavaScript
<template id="template"> <div class="card"> <h3 class="title">タイトル</h3> <p class="desc">説明</p> </div> </template> <div id="container"></div> <button id="addBtn">カードを追加</button>
.card { border: 1px solid #ddd; padding: 10px; margin: 8px 0; border-radius: 4px; } .card h3 { margin: 0 0 8px 0; } .card p { margin: 0; color: #666; }
let count = 0; document.getElementById('addBtn').addEventListener('click', function() { count++; const template = document.getElementById('template'); const clone = template.content.cloneNode(true); clone.querySelector('.title').textContent = 'カード ' + count; clone.querySelector('.desc').textContent = 'これは ' + count + ' 番目のカードです'; document.getElementById('container').appendChild(clone); });
cloneNode の注意点
id は重複に注意
複製元に id があると、同じ id を持つ要素が複数になります。複製後に id を変更するか削除しましょう。
イベントリスナーはコピーされない
addEventListener で追加したイベントリスナーは複製されません。必要なら複製後に再設定します。
id の重複を防ぐ
const original = document.getElementById('item'); const clone = original.cloneNode(true); // id を削除 clone.removeAttribute('id'); // または新しい id を設定 clone.id = 'item-copy';
template 要素との組み合わせ
上の例でも使いましたが、<template> 要素と組み合わせるとテンプレートパターンが実現できます。
<template id="row-template"> <tr> <td class="name"></td> <td class="value"></td> </tr> </template>
const template = document.getElementById('row-template'); const clone = template.content.cloneNode(true); clone.querySelector('.name').textContent = 'りんご'; clone.querySelector('.value').textContent = '100円'; table.appendChild(clone);
テンプレートの content プロパティを複製するのがポイントです。
