【jQuery】要素を追加するメソッド(append、prepend、before、after)の使い方

jQueryの要素を追加するメソッド

こちらではjQueryのメソッドのうち、DOMの追加などの操作をするメソッドについて解説しています。

jQueryのDOMの追加などの操作をするメソッド一覧

メソッド 解説
append(content[,content]) 選択した要素の最後にcontentを追加する。
appendTo(target) 要素をtargetの最後に追加する。A.append(B)とB.appendTo(A)が同じ動作。
prepend(content[,content]) 選択した要素の最初にcontentを追加する。
prependTo(target) 要素をtargetの最初に追加する。A.prependTo(B)とB.prependTo(A)が同じ動作。
before(content[,content]) 選択した要素の前にcontentを追加する。
insertBefore(target) 要素をtargetの前に追加する。A.before(B)とB.insertBefore(A)が同じ動作。
after(content[,content]) 選択した要素の後にcontentを追加する。
insertAfter(target) 要素をtargetの後に追加する。A.before(B)とB.insertAfter(A)が同じ動作。

append(content[,content])

選択した要素の最後にcontentを追加します。

append(content1, content2, …)のように複数の要素を追加することもできます。

append(content[,content])の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('ul').append('<li>ぶどう</li>');

とすると

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
	<li>ぶどう</li>
</ul>

となります。

append(content[,content])で1度に複数の要素を追加

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('ul').append('<li>ぶどう</li>', '<li>いちご</li>');

とすると

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
	<li>ぶどう</li>
	<li>いちご</li>
</ul>

となります。

appendTo(target)

要素をtarget(他の要素)の最後に追加します。

append(content)と似た動作をしますが、構文における要素の位置が逆になっています。

つまり、A.append(B)とB.appendTo(A)が同じ動作をします。

appendTo(target)の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('<li>ぶどう</li>').appendTo('ul');

とすると

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
	<li>ぶどう</li>
</ul>

となります。

prepend(content[,content])

選択した要素の最初にcontentを追加します。

prepend(content1, content2, …)のように複数の要素を追加することもできます。

prepend(content[,content])の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('ul').prepend('<li>ぶどう</li>');

とすると

<ul>
	<li>ぶどう</li>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

となります。

prepend(content[,content])で1度に複数の要素を追加

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('ul').prepend('<li>ぶどう</li>', '<li>いちご</li>');

とすると

<ul>
	<li>ぶどう</li>
	<li>いちご</li>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

となります。

prependTo(target)

要素をtarget(他の要素)の最初に追加します。

prepend(content)と似た動作をしますが、構文における要素の位置が逆になっています。

つまり、A.prepend(B)とB.prependTo(A)が同じ動作をします。

prependTo(target)の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて

$('<li>ぶどう</li>').prependTo('ul');

とすると

<ul>
	<li>ぶどう</li>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

となります。

before(content[,content])

選択した要素の前にcontentを追加します。

before(content1, content2, …)のように複数の要素を追加することもできます。

before(content[,content])の使い方

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('#apple').before('<li>ぶどう</li>');

とすると

<ul>
	<li>ぶどう</li>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

となります。

insertBefore(target)

要素をtarget(他の要素)の前に追加します。

before(content)と似た動作をしますが、構文における要素の位置が逆になっています。

つまり、A.before(B)とB.insertBefore(A)が同じ動作をします。

insertBefore(target)の使い方

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('<li>ぶどう</li>').insertBefore('#apple');

とすると

<ul>
	<li>ぶどう</li>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

となります。

after(content[,content])

選択した要素の後にcontentを追加します。

after(content1, content2, …)のように複数の要素を追加することもできます。

after(content[,content])の使い方

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('#apple').after('<li>ぶどう</li>');

とすると

<ul>
	<li id="apple">りんご</li>
	<li>ぶどう</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

となります。

insertAfter(target)

要素をtarget(他の要素)の後に追加します。

after(content)と似た動作をしますが、構文における要素の位置が逆になっています。

つまり、A.after(B)とB.insertAfter(A)が同じ動作をします。

insertAfter(target)の使い方

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('<li>ぶどう</li>').insertAfter('#apple');

とすると

<ul>
	<li id="apple">りんご</li>
	<li>ぶどう</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

となります。

[prism]