Terms Privacy

© Rollpie

JavaScript
17 Jan 2026

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

9 views