要素の後ろにタグを追加するには、afterを使います。
サンプル
例）ボタンを押すと、要素の後にxyzを追加する
123456789101112131415161718192021
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>サンプル</title><script src="http://code.jquery.com/jquery-3.2.1.min.js"></script><script>$(function(){ // $('#btn1').click(function(){ //要素の後ろにタグを追加する $("#a1").after("<b>xyz</b>"); });});</script></head><body> <input type="button" id="btn1" value="ボタン"> <div id="a1"><span style="color:red;">abc</span></div></body></html>
実行例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ // $('#btn1').click(function(){ //要素の後ろにタグを追加する $("#a1").after("<b>xyz</b>"); }); }); </script> </head> <body> <input type="button" id="btn1" value="ボタン"> <div id="a1"><span style="color:red;">abc</span></div> </body> </html> |
ボタンを押すと要素（abc）の後ろに要素（xyz）を追加します。
abc
appendとの違い
似たメソッドに .appendがありますが、appendは対象の要素内の末尾に追加するのに対し、afterは対象要素の外側の末尾に追加されるという違いがあります。
- after、appendの違い
- 例）「<div>abc</div>」に追加する 「.append("<b>xyz</b>");」の場合 →<div>abc<b>xyz</b></div> 「.after("<b>xyz</b>");」の場合 →<div>abc</div><b>xyz</b>
解説
- 要素の前にタグを追加したい場合は、beforeを使用します。
詳しくはこちらのページをご覧ください。 →要素の前にタグを追加する（before）