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