jQuery のタグ挿入系のメソッドの動作一覧
いつもどれだったけ？と成ってしまうのでそれぞれのメソッドを使った時にどの様にタグが挿入や移動されるかのメモ。
さっと確認したい人向けのまとめ
after
引数に指定したタグを並列な階層の最後に追加。
例) #a の後に <div>new tag</div> を追加。
$('#a').after('<div>new tag</div>');
insertAfter
引数に指定したタグの後ろに移動。
例) #b の閉じタグ後に #b が移動。
$('#d').insertAfter('#b');
append
引数に指定したタグを自身のタグ内の最後に追加。
例) #a タグ内の最後に <div>new tag</div> を追加。
$('#a').append('<div>new tag</div>');
appendTo
引数に指定したタグの最後に自身のタグを移動。
例) #d タグ内の最後に #a を移動。
$('#a').appendTo('#d');
prepend
自身のタグ内の先頭に引数に指定したタグを追加。
例) #a タグ内の先頭に <div>new tag</div> を追加。
$('#a').prepend('<div>new tag</div>');
prependTo
自身のタグを引数でしたタグ内の先頭に移動。
例) #a タグ内の先頭に #d を移動。
$('#d').prependTo('#a');
before
引数に指定したタグを自身のタグの前に追加。複数の要素に対して追加が可能。
例) 全ての div タグの前に <div>new tag</div> を追加。
$('div').before('<div>new tag</div>');
insertBefore
引数に指定したタグの前に自身を移動。
例) #b の前に #d を移動。
$('#d').insertBefore('#b');
wrap
指定のタグ内の最後に自身のタグを移動。
例) <div>new tag</div> 内に #a を移動。
$('#a').wrap('<div>new tag</div>');
wrapAll
指定のタグ内の最後に指定のelementを全て移動。
例) <div>new tag</div> 内に全ての div タグを移動。
$('div').wrapAll('<div>new tag</div>');
テスト内容
HTMLの主な部分こちら。ここに対して、jQueryのメソッドを実行します。全コードは最後に記載しておきます。
<div id="contents"> <div id="a"> a <div id="b"> b <div id="c"> c </div> </div> </div> <div id="d">d</div> </div>
after
【処理】
$('#a').after('<div>new tag</div>');【結果】
<div id="a"> a <div id="b"> b <div id="c"> c </div> </div> </div><div>new tag</div> <div id="d">d</div>
引数に指定したタグを並列な階層の最後に追加。今回の場合は #a の後に追加。
insertAfter
【処理】
$('#d').insertAfter('#b');【結果】
<div id="a"> a <div id="b"> b <div id="c"> c </div> </div><div id="d">d</div> </div>
引数に指定したタグの後ろに移動。今回の場合は #b の後に移動。
append
【処理】
$('#a').append('<div>new tag</div>');【結果】
<div id="a"> a <div id="b"> b <div id="c"> c </div> </div> <div>new tag</div></div> <div id="d">d</div>
引数に指定したタグを自身のタグ内の最後に追加。今回の場合は #a タグ内の最後に追加。
appendTo
【処理】
$('#a').appendTo('#d');【結果】
<div id="d">d<div id="a"> a <div id="b"> b <div id="c"> c </div> </div> </div></div>
引数に指定したタグの最後に自身のタグを移動。今回の場合は #d タグ内の最後に #a を移動。
prepend
【処理】
$('#a').prepend('<div>new tag</div>');【結果】
<div id="a"><div>new tag</div> a <div id="b"> b <div id="c"> c </div> </div> </div> <div id="d">d</div>
自身のタグ内の先頭に引数に指定したタグを追加。今回の場合は #a タグ内の先頭に追加。
prependTo
【処理】
$('#d').prependTo('#a');【結果】
<div id="a"><div id="d">d</div> a <div id="b"> b <div id="c"> c </div> </div> </div>
自身のタグを引数でしたタグ内の先頭に移動。今回の場合は #a タグ内の先頭に移動。
before
【処理】
$('div').before('<div>new tag</div>');【結果】
<div>new tag</div><div id="a"> a <div>new tag</div><div id="b"> b <div>new tag</div><div id="c"> c </div> </div> </div> <div>new tag</div><div id="d">d</div>
引数に指定したタグを自身のタグの前に追加。複数の要素に対して追加が可能。今回の場合は全ての div タグの前に <div>new tag</div> を追加。
insertBefore
【処理】
$('#d').insertBefore('#b');【結果】
<div id="a"> a <div id="d">d</div><div id="b"> b <div id="c"> c </div> </div> </div>
引数に指定したタグの前に自身を移動。今回の場合は #b の前に移動。
wrap
【処理】
$('#a').wrap('<div>new tag</div>');【結果】
<div>new tag<div id="a"> a <div id="b"> b <div id="c"> c </div> </div> </div></div> <div id="d">d</div>
指定のタグ内の最後に自身のタグを移動。今回の場合は <div>new tag</div> 内に #a を移動。
wrapAll
【処理】
$('div').wrapAll('<div>new tag</div>');【結果】
<div>new tag<div id="a"> a </div><div id="b"> b </div><div id="c"> c </div><div id="d">d</div></div>
指定のタグ内の最後に指定のelementを全て移動。今回の場合は <div>new tag</div> 内に全ての div タグを移動。
HTMLのコード
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(document).ready(function(){ // ここに色々書いてテスト }); </script> <style> body { background: gray; } #a { background: #0040ff; padding: 10px; } #b { background: #0080ff; padding: 10px; } #c { background: #00c0ff; padding: 10px; } #d { background: #cf2828; padding: 10px; } </style> <title>jQueryのタグ挿入系のメソッドの動作テスト</title> </head> <body> <div id="contents"> <div id="a"> a <div id="b"> b <div id="c"> c </div> </div> </div> <div id="d">d</div> </div> </body> </html>
