cloneNode で要素を複製する
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 プロパティを複製するのがポイントです。
15views
