jQueryを利用したDOM操作 要素の追加メソッドまとめ

  • 405
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

jQueryでの要素追加メソッドをよく忘れるので、それのメモです。
似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel !

なお実際の動作は↓で確認ができます
http://nekoneko-wanwan.github.io/demo/jquery/dom/

とりあげるメソッド

  • append()
  • appendTo()
  • prepend()
  • prependTo()
  • after()
  • insertAfter()
  • before()
  • insertBefore()
  • wrap()
  • wrapInner()
  • wrapAll()

メソッド

append()

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

append.gif

appendTo()

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

appendTo.gif

prepend()

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

prepend.gif

prependTo()

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

prependTo.gif

after()

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

after.gif

insertAfter()

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

insertAfter.gif

before()

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

before.gif

insertBefore()

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

insertBefore.gif

wrap()

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

wrap.gif

wrapInner()

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

wrapInner.gif

wrapAll()

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

wrapAll.gif