.append()で要素の末尾にコンテンツを追加しよう!

.append()で要素の末尾にコンテンツを追加しよう!

.append()は、セレクタに一致した要素の末尾にコンテンツを追加するメソッドです。

HTMLコンテンツを追加するには?

// 元のHTML
<p>元のHTMLです。</p>
$('p').append('<span>追加のHTMLです。</span>');
// 追加後のHTML
<p>元のHTMLです。<span>追加のHTMLです。</span></p>

.append()にHTMLコンテンツを渡すことで、セレクタで選択した要素の末尾に追加できます。

.append()できないんだけど…

$('<span>追加のHTMLです。</span>').append('p');

セレクタと要素が逆になっているため、このコードは動作しません。

.appendTo()とは逆になりますので、注意しましょう。

.append()の戻り値は?

戻り値はセレクタで選択した要素です。

サンプルでは$(‘p’)が返されます。

.appendTo()とは異なり、追加したコンテンツが返されるわけではありません。

複数のHTMLコンテンツを追加するには?

// 元のHTML
<p>元</p>
$('p').append(['追加1', '追加2', '追加3']);
// 追加後のHTML
<p>元追加1追加2追加3</span></p>

複数のHTMLコンテンツを追加するには、.append()にHTMLコンテンツの配列を渡します。

$('p').append('追加1', '追加2', '追加3');

複数の引数を渡すと、第1引数から順番に追加してくれます。

動作は、配列を使ったサンプルと同様です。

.append()と.appendTo()の違いは?

$('p').append('<span>追加のテキストです。</span>');
$('<span>追加のテキストです。</span>').appendTo('p');

サンプルはどちらも同じ動作になります。

コンテンツ「を」要素に追加するのが.append()で、要素「に」コンテンツを追加するのが.appendTo()です。

引数が単一の場合、.append()のセレクタと引数を逆にすれば、.appendTo()で使えるコードになります。

追加した要素を削除(.remove())するには?

let p = $('p').append('<span>追加のHTMLです。</span>');

p.remove();

このコードを実行した場合、元の要素が削除されます。

.append()が返すのは$(‘p’)なので、$(‘p’).remove(); したのと同じ処理になるからです。

let appended = $('<span>追加のHTMLです。</span>').appendTo('p');

appended.remove();

.appendTo()は追加した要素を返すため、.remove()で削除できます。

追加した要素をセレクタで選択して削除する方法もありますが、こちらの方がスマートです。

.append()と.after()の違いは?

// 元のHTML
<p>元のHTMLです。</p>
$('p').after('<span>追加のHTMLです。</span>');
// 追加後のHTML
<p>元のHTMLです。</p>
<span>追加のHTMLです。</span>

要素の「中」に追加するのが.append()、要素の「後ろ」に追加するのが.after()です。

.after()を使用した場合、セレクタで選択した要素の直後にHTMLコンテンツが追加されます。

まとめ

  • HTMLコンテンツを要素の末尾に追加するには.append()を使います。
  • .append()できない場合は、セレクタと追加するコンテンツが逆になっていないかを確かめましょう。
  • 戻り値は、セレクタで選択した要素です。
  • 複数のHTMLコンテンツを追加するには、配列か複数の引数を渡します。
  • .append()のセレクタと引数を逆にすれば、.appendTo()できます。
  • 追加した要素を削除するには、.appendTo()を使います。
  • .after()は要素の「後ろ」に追加するメソッドです。

メソッドカテゴリの最新記事