Edited at

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

More than 3 years have passed since last update.


はじめに

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