jQueryの要素を追加するメソッドまとめ【保存版】

$(親要素).append(追加する要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('#list').append('<li>最後に追加</li>');

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>最後に追加</li>
</ul>

$(追加する要素).appendTo(親要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('<li>最後に追加</li>').appendTo('#list');

$(親要素).prepend(追加する要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('#list').prepend('<li>先頭に追加</li>');

<ul id="list">
  <li>先頭に追加</li>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$(追加する要素).prependTo(親要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('<li>先頭に追加</li>').prependTo('#list');

$(指定要素).before(追加する要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('#list').before('<p>#listの前に追加</p>');

<p>#listの前に追加</p>
<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$(追加する要素).insertBefore(対象要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('<p>#listの前に追加</p>').insertBefore('#list');

<p>#listの前に追加</p>
<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$(対象要素).after(追加する要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('#list').after('<p>#listの後に追加</p>');

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>
<p>#listの後に追加</p>

$(追加する要素).insertAfter(対象要素);

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

$('<p>#listの後に追加</p>').insertAfter('#list');

<ul id="list">
  <li>リスト1</li>
  <li>リスト2</li>
</ul>
<p>#listの後に追加</p>

$(対象要素).wrap('<div class="wrapper"></div>');

<div class="box">box1</div>
<div class="box">box2</div>

$('.box').wrap('<div class="wrapper"></div>');

<div class="wrapper">
  <div class="box">box1</div>
</div>
<div class="wrapper">
  <div class="box">box2</div>
</div>

$(対象要素).wrapInner('<div class="inner-wrapper"></div>');

<div class="wrap">
  <h1>タイトル</h1>
  <p>テキスト</p>
</div>

$('.wrap').wrapInner('<div class="inner-wrapper"></div>');

<div class="wrap">
  <div class="inner-wrapper">
    <h1>タイトル</h1>
    <p>テキスト</p>
  </div>
</div>

$(対象要素).wrapAll('<div class="group-wrapper"></div>');

<section class="section">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>
<section class="section">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>

$('.section').wrapAll('<div class="group-wrapper"></div>');

<section class="section">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>
<section class="section-other">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>
<section class="section">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>
<section class="section-other">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>

<div class="group-wrapper">
  <section class="section">
    <h1>タイトル</h1>
    <p>テキスト</p>
  </section>
  <section class="section">
    <h1>タイトル</h1>
    <p>テキスト</p>
  </section>
</div>
<section class="section-other">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>
<section class="section-other">
  <h1>タイトル</h1>
  <p>テキスト</p>
</section>