要素の後にタグを追加するには、.appendを使用します。
サンプル
例）ボタンを押すと、要素の後にxyzを追加する
1234567891011121314151617181920
<!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").append("<b>abc</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 |
<!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").append("<b>abc</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
afterとの違い
似たメソッドに .afterがありますが、afterは対象要素の外側の末尾に追加するのに対し、appendは対象要素の内側の末尾に追加されるという違いがあります。
- after、appendの違い
- 例）「<div>abc</div>」に追加する 「.after("<b>xyz</b>");」の場合 →<div>abc</div><b>xyz</b> 「.append("<b>xyz</b>");」の場合 →<div>abc<b>xyz</b></div>
解説
- 要素の先頭にタグを追加したい場合は、prependを使用します。
詳しくはこちらをご覧ください。 →要素内の先頭にタグを追加する（prepend）