こちらでは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]