【JavaScript】要素を複製（クローン）する方法｜cloneNode・templateパターン・イベント再設定・ID重複対策まで解説

// 深いコピー（子要素・テキストノードもすべて複製）
const clone = element.cloneNode(true);

// 浅いコピー（要素自体のみ。子要素は含まない）
const shallowClone = element.cloneNode(false);

// 複製した要素を DOM に挿入（挿入しないと画面に表示されない）
document.body.appendChild(clone);

<!-- 元の要素 -->
<ul id="original">
  <li>りんご</li>
  <li>みかん</li>
</ul>

<script>
const original = document.getElementById('original');

// 深いコピー → <ul><li>りんご</li><li>みかん</li></ul>
const deepClone    = original.cloneNode(true);

// 浅いコピー → <ul></ul>（中身なし）
const shallowClone = original.cloneNode(false);

document.body.appendChild(deepClone);    // リスト全体が複製される
document.body.appendChild(shallowClone); // 空の ul が追加されるだけ
</script>

// NG: id="card" が 2 つ存在してしまう
const card  = document.getElementById('card');
const clone = card.cloneNode(true);
document.body.appendChild(clone);

// getElementById('card') は常に最初の要素しか返さない

const card  = document.getElementById('card');
const clone = card.cloneNode(true);

// 方法①: id を削除する（参照が不要なら）
clone.removeAttribute('id');

// 方法②: 連番の id を付ける
let cloneCount = 1;
function cloneCard() {
  const clone = card.cloneNode(true);
  clone.id = `card-${++cloneCount}`;

  // 子要素の id も再帰的に変更する（必要な場合）
  clone.querySelectorAll('[id]').forEach(el => {
    el.id = `${el.id}-${cloneCount}`;
  });

  document.body.appendChild(clone);
}

// 元の要素にイベントを登録
const btn = document.getElementById('btn');
btn.addEventListener('click', () => alert('クリック!'));

// クローンにはイベントリスナーが引き継がれない
const clone = btn.cloneNode(true);
document.body.appendChild(clone);
// clone をクリックしても alert は発火しない

function cloneWithEvent(original, container) {
  const clone = original.cloneNode(true);
  clone.removeAttribute('id');

  // クローンの中のボタンにイベントを再登録
  clone.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', handleClick);
  });

  container.appendChild(clone);
}

function handleClick(e) {
  console.log('クリック:', e.currentTarget.textContent);
}

// クローンの都度イベントを登録する代わりに、親要素で委譲する
// → クローンが何個増えても addEventListener を追加しなくてよい

const list = document.getElementById('list');

list.addEventListener('click', (e) => {
  // クリックされたのが .delete-btn なら削除
  if (e.target.classList.contains('delete-btn')) {
    e.target.closest('.list-item').remove();
  }
  // クリックされたのが .edit-btn なら編集
  if (e.target.classList.contains('edit-btn')) {
    const item = e.target.closest('.list-item');
    console.log('編集:', item.dataset.id);
  }
});

<!-- template の中身は画面に表示されない -->
<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
    <button class="delete-btn">削除</button>
  </div>
</template>

<!-- カードを追加するボタン -->
<div id="card-list"></div>
<button id="add-card">カードを追加</button>

const template = document.getElementById('card-template');
const cardList  = document.getElementById('card-list');
let   cardIndex = 0;

document.getElementById('add-card').addEventListener('click', () => {
  // template の中身を複製（template.content が DocumentFragment）
  const clone = template.content.cloneNode(true);

  // 中身を書き換えてから挿入
  cardIndex++;
  clone.querySelector('.card-title').textContent = `カード ${cardIndex}`;
  clone.querySelector('.card-body').textContent  = `これは ${cardIndex} 枚目のカードです`;
  clone.querySelector('.card').dataset.id        = cardIndex;

  cardList.appendChild(clone);
});

// イベント委譲で削除を管理
cardList.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete-btn')) {
    e.target.closest('.card').remove();
  }
});

<table id="item-table">
  <thead>
    <tr><th>商品名</th><th>数量</th><th>操作</th></tr>
  </thead>
  <tbody id="item-body">
    <tr class="item-row">
      <td><input type="text" name="item_name[]" placeholder="商品名"></td>
      <td><input type="number" name="qty[]" min="1" value="1"></td>
      <td><button type="button" class="remove-row">削除</button></td>
    </tr>
  </tbody>
</table>
<button type="button" id="add-row">行を追加</button>

const tbody  = document.getElementById('item-body');
const addBtn = document.getElementById('add-row');

// 最初の行をテンプレートとして使う
const rowTemplate = tbody.querySelector('.item-row');

addBtn.addEventListener('click', () => {
  const clone = rowTemplate.cloneNode(true);

  // 入力値をクリア（元の行の値がコピーされてしまうため）
  clone.querySelectorAll('input').forEach(input => {
    input.value = input.type === 'number' ? '1' : '';
  });

  tbody.appendChild(clone);
});

// イベント委譲で削除ボタンを管理
tbody.addEventListener('click', (e) => {
  if (!e.target.classList.contains('remove-row')) return;

  // 行が1つだけの場合は削除しない
  if (tbody.querySelectorAll('.item-row').length <= 1) return;

  e.target.closest('.item-row').remove();
});

// innerHTML は文字列でHTMLを生成できるが、ユーザー入力が混入すると XSS になる
function addCardHTML(title, body) {
  const safeTitle = title.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  const safeBody  = body.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

  cardList.insertAdjacentHTML('beforeend', `
    <div class="card">
      <h3 class="card-title">${safeTitle}</h3>
      <p class="card-body">${safeBody}</p>
      <button class="delete-btn">削除</button>
    </div>
  `);
}

// cloneNode を使う場合は textContent で設定するため XSS リスクがない
function addCardClone(title, body) {
  const clone = template.content.cloneNode(true);
  clone.querySelector('.card-title').textContent = title;  // 自動エスケープ
  clone.querySelector('.card-body').textContent  = body;   // 自動エスケープ
  cardList.appendChild(clone);
}