DOMの操作

ここではjQueryによるDOMの操作について紹介します。

1. append: 要素内の末尾に引数を追加

<ul><li>fuga</li></ul><ul><li>fuga</li><li>要素を末尾に追加</li></ul>とします。

$('ul').append('<li>要素を末尾に追加</li>');

2. appendTo: 要素の中身をほかの要素内の末尾に追加

$(A).append(B)$(B).appendTo(A)が同じ動作になります。

$('<li>要素を末尾に追加</li>').appendTo('ul');

3. prepend: 要素内の先頭に引数を追加

<ul><li>fuga</li></ul><ul><li>hoge</li><li>要素を先頭に追加</li></ul>とします。

$('ul').prepend('<li>要素を先頭に追加</li>');

4. prependTo: 要素の中身をほかの要素内の先頭に追加

$(A).prepend(B)$(B).prependTo(A)が同じ動作になります。

$('<li>要素を先頭に追加').prependTo('ul');

5. after: 要素外の末尾に引数を追加

<ul><li>fuga</li></ul><ul><li>hoge</li></ul><p>最後に追加</p>とします。

$('ul').after('<p>最後に追加</p>');

6. insertAfter: 要素外の末尾に引数を追加

$(A).after(B)$(B).insertAfter(A)が同じ動作になります。

$('<p>最後に追加</p>').insertAfter('ul');

7. before: 要素外の末尾に引数を追加

<ul><li>fuga</li></ul><p>最初に追加</p><ul><li>hoge</li></ul>とします。

$('ul').before('<p>最初に追加</p>');

8. insertAfter: 要素外の末尾に引数を追加

$(A).before(B)$(B).insertBefore(A)が同じ動作になります。

$('<p>最初に追加</p>').insertAfter('ul');

9. wrap: 要素の外側を引数のHTMLタグで囲む

<p>hoge</p><div><p>hoge</p></div>にします。

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

10. wrapInner: 要素の内側を引数のHTMLタグで囲む

<p>hoge</p><p><div>hoge</div></p>にします。

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

11. wrapAll: 要素の内側を引数のHTMLタグで囲む

<p>hoge</p><p>fuga</p><div><p>hoge</p><p>fuga</p></div>にします。

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

12. デモ

紹介したメソッドの動作確認は次のサイトで確認できます。

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

13. 参考リンク

results matching ""

    No results matching ""