【JavaScript】既存の要素を移動させる方法｜appendChild・insertBefore・after・before・cloneNode の使い分けと実践パターン解説

<div id="boxA">
  <p id="target">このpを移動させる</p>
</div>
<div id="boxB">
  <!-- ここに target を移動させたい -->
</div>

const target = document.getElementById('target');
const boxB   = document.getElementById('boxB');

// appendChild に既存要素を渡すと「移動」になる
boxB.appendChild(target);

// 結果: #target は #boxA から消え、#boxB の末尾に追加される
// → removeChild は不要！

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

// 末尾に移動
list.appendChild(itemA);
list.append(itemA);      // 同等（append は複数・文字列も渡せる）

// 先頭に移動
list.prepend(itemA);

// itemB の直前に移動
list.insertBefore(itemA, itemB);
itemB.before(itemA);     // 同等

// itemB の直後に移動
itemB.after(itemA);

// itemB と置き換え（itemB は消える）
itemB.replaceWith(itemA);

const original = document.getElementById('template');

// true を渡すと子孫要素も含めてディープコピー
const clone = original.cloneNode(true);

// clone を別の場所に挿入（original はそのまま残る）
document.getElementById('container').appendChild(clone);

// 注意：clone には id が重複する可能性があるため、
// clone した後に id を変更するか、最初から id を付けない設計にする
clone.id = 'template-copy';

<ul id="sortableList">
  <li>項目 A <button class="move-up">↑</button><button class="move-down">↓</button></li>
  <li>項目 B <button class="move-up">↑</button><button class="move-down">↓</button></li>
  <li>項目 C <button class="move-up">↑</button><button class="move-down">↓</button></li>
  <li>項目 D <button class="move-up">↑</button><button class="move-down">↓</button></li>
</ul>

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

// イベント委譲でボタンのクリックを一括処理
list.addEventListener('click', (e) => {
  const btn = e.target.closest('.move-up, .move-down');
  if (!btn) return;

  const li   = btn.closest('li');
  const isUp = btn.classList.contains('move-up');

  if (isUp) {
    const prev = li.previousElementSibling;
    if (prev) list.insertBefore(li, prev); // li を prev の直前に移動
  } else {
    const next = li.nextElementSibling;
    if (next) next.after(li); // next の直後に移動
  }
});

<ul id="dndList">
  <li draggable="true" data-id="1">項目 1</li>
  <li draggable="true" data-id="2">項目 2</li>
  <li draggable="true" data-id="3">項目 3</li>
  <li draggable="true" data-id="4">項目 4</li>
</ul>

#dndList li {
  padding: 10px 16px;
  margin: 4px 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: grab;
  transition: opacity 0.2s, background 0.2s;
}

#dndList li.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

#dndList li.drag-over {
  background: #eff6ff;
  border-color: #93c5fd;
}

const dndList = document.getElementById('dndList');
let draggingEl = null;

dndList.addEventListener('dragstart', (e) => {
  draggingEl = e.target.closest('li');
  draggingEl.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
});

dndList.addEventListener('dragend', () => {
  draggingEl?.classList.remove('dragging');
  dndList.querySelectorAll('.drag-over').forEach((el) => {
    el.classList.remove('drag-over');
  });
  draggingEl = null;
});

dndList.addEventListener('dragover', (e) => {
  e.preventDefault(); // ドロップを許可
  const target = e.target.closest('li');
  if (!target || target === draggingEl) return;

  // ドラッグ中の要素がターゲットの上半分にあるか下半分にあるかで挿入位置を決める
  const rect   = target.getBoundingClientRect();
  const midY   = rect.top + rect.height / 2;
  const isAbove = e.clientY < midY;

  dndList.querySelectorAll('.drag-over').forEach((el) => el.classList.remove('drag-over'));
  target.classList.add('drag-over');

  if (isAbove) {
    dndList.insertBefore(draggingEl, target);
  } else {
    target.after(draggingEl);
  }
});

const source      = document.getElementById('source');
const destination = document.getElementById('destination');

// 移動したい要素を選択
const itemsToMove = source.querySelectorAll('.move-target');

// DocumentFragment に一時的に収める
const fragment = document.createDocumentFragment();
itemsToMove.forEach((el) => fragment.appendChild(el)); // source から切り離される

// 1回の操作で destination に挿入（リフローは1回）
destination.appendChild(fragment);

// ※ fragment 自体は DOM に追加されず、中身だけが展開される

const ref = document.getElementById('reference');
const el  = document.getElementById('moving');

// ref の開始タグの直前（ref の前の兄弟になる）
ref.insertAdjacentElement('beforebegin', el);

// ref の開始タグの直後（ref の最初の子になる）
ref.insertAdjacentElement('afterbegin', el);

// ref の終了タグの直前（ref の最後の子になる）
ref.insertAdjacentElement('beforeend', el);

// ref の終了タグの直後（ref の後の兄弟になる）
ref.insertAdjacentElement('afterend', el);

// before/after/prepend/append で同等の操作が可能
ref.before(el);        // beforebegin と同じ
ref.prepend(el);       // afterbegin と同じ
ref.append(el);        // beforeend と同じ
ref.after(el);         // afterend と同じ