この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: jQuery で要素を追加（append / prepend / before / after / wrap）
SEOタイトル: jQuery 要素追加メソッド全パターン + 現代の Vanilla JS 代替（appendChild / insertAdjacentHTML）

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

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

    
    
  • Apple
    • 
    
  • Banana
    •