この記事の要点

$(parent).append(child) = 末尾に追加、prepend = 先頭に追加 before / after は兄弟として挿入（要素の前/後） .html(str) は中身を全置換、.append(str) は追記 wrap / wrapAll / wrapInner で要素を包む 現代はVanilla JS の appendChild / insertAdjacentHTML / appendで十分。jQuery 依存を減らせる

append / prepend（子要素として追加）

<ul id="list">
    <li>Apple</li>
    <li>Banana</li>
</ul>

<script>
// 末尾に追加
$('#list').append('<li>Cherry</li>');
// → Apple, Banana, Cherry

// 先頭に追加
$('#list').prepend('<li>Avocado</li>');
// → Avocado, Apple, Banana, Cherry

// 要素オブジェクトも渡せる
const $newItem = $('<li>').text('Date');
$('#list').append($newItem);

// 既存要素を移動（コピーではない）
$('#list').append($('#someExistingLi'));

// 逆向き: appendTo / prependTo
$('<li>Eggplant</li>').appendTo('#list');

before / after（兄弟として挿入）

<div>
    <p id="target">対象</p>
</div>

<script>
$('#target').before('<p>前に挿入</p>');
$('#target').after('<p>後ろに挿入</p>');

// 結果:
// <div>
//     <p>前に挿入</p>
//     <p id="target">対象</p>
//     <p>後ろに挿入</p>
// </div>

// insertBefore / insertAfter は引数順が逆
$('<p>X</p>').insertBefore('#target');
$('<p>Y</p>').insertAfter('#target');

4 つの挿入メソッドの違い（重要）

メソッド	場所	関係
append	対象要素の中・末尾	子要素として
prepend	対象要素の中・先頭	子要素として
before	対象要素の前	兄弟として
after	対象要素の後	兄弟として

.html() と .append() / .text() の違い

// .html(str): 中身を全置換（HTML として解釈）
$('#box').html('<b>新内容</b>');
// 既存の子は全部消える

// .append(str): 末尾に追記
$('#box').append('<b>追加</b>');
// 既存の子は残る

// .text(str): テキスト挿入（XSS 安全）
$('#box').text('<b>表示される</b>');
// → 画面に <b>表示される</b> と文字列のまま表示

// .empty(): 中身を空に
$('#box').empty();

// 危険: ユーザ入力をそのまま html() に渡すと XSS
const userInput = '<img src=x onerror=alert(1)>';
$('#box').html(userInput);    // ❌ XSS 発火
$('#box').text(userInput);    // ✅ 安全

wrap / wrapAll / wrapInner

<!-- 元 -->
<p>A</p>
<p>B</p>
<p>C</p>

<script>
// wrap: 各要素を個別に包む
$('p').wrap('<div class="card"></div>');
// → <div class="card"><p>A</p></div>
//    <div class="card"><p>B</p></div>
//    <div class="card"><p>C</p></div>

// wrapAll: 全部まとめて包む
$('p').wrapAll('<section></section>');
// → <section><p>A</p><p>B</p><p>C</p></section>

// wrapInner: 中身だけ包む
$('p').wrapInner('<strong></strong>');
// → <p><strong>A</strong></p>...

// unwrap: 親を解除
$('p').unwrap();

クローンと移動

// 移動（DOM から消えて別の場所に）
$('#source').append($('#movingItem'));

// コピー（複製を append）
$('#source').append($('#item').clone());

// イベントハンドラ込みでコピー
$('#item').clone(true).appendTo('#dest');
$('#item').clone(true, true).appendTo('#dest');  // 子要素のイベントも

現代の Vanilla JS で書き直す

2026 年現在、jQuery の挿入系メソッドは Vanilla JS でほぼ同等に書けます:

jQuery	Vanilla JS
$(p).append(c)	p.appendChild(c) or p.append(c)
$(p).prepend(c)	p.prepend(c)
$(t).before(x)	t.before(x) or t.insertAdjacentElement('beforebegin', x)
$(t).after(x)	t.after(x)
$(e).html(s)	e.innerHTML = s
$(e).text(s)	e.textContent = s
$(e).empty()	e.replaceChildren()
$(e).remove()	e.remove()

// Vanilla JS で書き直し
const list = document.getElementById('list');

// 末尾追加
const li = document.createElement('li');
li.textContent = 'New Item';
list.append(li);                 // append() は ES2019+ 全モダン対応

// HTML 文字列で追加
list.insertAdjacentHTML('beforeend', '<li>From HTML</li>');
// 'beforebegin' / 'afterbegin' / 'beforeend' / 'afterend'

// 複数同時追加
list.append(li1, li2, li3, 'テキストも OK');

// 削除
li.remove();

insertAdjacentHTML の 4 つのポジション

<!-- beforebegin --><div id="t">
  <!-- afterbegin -->
  既存テキスト
  <!-- beforeend -->
</div><!-- afterend -->

target.insertAdjacentHTML('beforebegin', '<x>')  → <x>の前に兄弟挿入
target.insertAdjacentHTML('afterbegin',  '<x>')  → <x>の中の先頭
target.insertAdjacentHTML('beforeend',   '<x>')  → <x>の中の末尾
target.insertAdjacentHTML('afterend',    '<x>')  → <x>の後に兄弟挿入

FAQ

Q: appendChild と append の違い
A: append() は複数引数・文字列も OK で戻り値なし。appendChild() は単一 Node のみで挿入したノードを返す。新規コードは append() 推奨。

Q: jQuery を捨てたい
A: 挿入系・属性系・イベント系はほぼ Vanilla JS で代替可能。残るは Ajax (fetch) と一部のアニメーション（CSS で代替）。

Q: innerHTML + 文字列連結が遅い
A: DocumentFragment にまとめて append、最後に親に挿入。または insertAdjacentHTML を 1 回で。