DOM要素追加メソッドまとめ

- ここで実際に実行しているhtml/jsコードと、表示しているものは異なります。
- コードベースで確認できるように作成しているため、実際のソースコードは参考になりません。
- またメソッドの引数にfunction()を渡すことでindex番号などを得られるものもあります。

append()

$('ul').append('<li>追加されました</li>');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

appendTo()

$('<li>追加されました</li>').appendTo('ul');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

prepend()

$('ul').prepend('<li>追加されました</li>');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

prependTo()

$('<li>追加されました</li>').prependTo('ul');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

after()

$('ul').after('<p>追加されました</p>');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

insertAfter()

$('<p>追加されました</p>').insertAfter('ul');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

before()

$('ul').before('<p>追加されました</p>');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

insertBefore()

$('<p>追加されました</p>').insertBefore('ul');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

wrap()

$('p').wrap('<div />');

要素1

要素2

要素

wrapInner()

$('li').wrapInner('<span />');

<ul>

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

</ul>

wrapAll()

$('p').wrapAll('<div />');

* 一回しか実行できないようにしています

要素1

要素2

要素

jQuery DOM要素追加メソッドまとめ

append()

appendTo()

prepend()

prependTo()

after()

insertAfter()

before()

insertBefore()

wrap()

wrapInner()

wrapAll()