jQuery after()とinsertAfter()の例
jQuery
after()
と
insertAfter()
の両方のメソッドは、同じタスクを実行しています。一致した要素の後にテキストまたはHTMLコンテンツを追加します。主な違いは構文にあります。
例えば、
<div class="greyBox">I'm a ipman</div> <div class="greyBox">I'm a ipman 2</div>
1. $( ‘selector’). after( ‘new content’);
$('.greyBox').after("<div class='redBox'>Iron man</div>");
2. $( ‘新しいコンテンツ’). insertAfter( ‘selector’);
$("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');
結果
上の2つのメソッドは同じタスクを実行していますが、シンタックスが異なると、
after()
または
insertAfter()
の後の新しい内容は
<div class="greyBox"> I'm a ipman </div> <div class='redBox'>Iron man</div> <div class="greyBox"> I'm a ipman 2 </div> <div class='redBox'>Iron man</div>
自分で試してみてください
<html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> .greyBox{ padding:8px; background: grey; margin-bottom:8px; width:300px; height:100px; } .redBox{ padding:8px; background: red; margin-bottom:8px; width:200px; height:50px; } </style> </head> <body> <h1>jQuery after() and insertAfter() example</h1> <div class="greyBox">Ip man</div> <div class="greyBox">Ip man 2</div> <p> <button id="after">after()</button> <button id="insertAfter">insertAfter()</button> <button id="reset">reset</button> </p> <script type="text/javascript"> $("#after").click(function () { $('.greyBox').after("<div class='redBox'>Iron man</div>"); }); $("#insertAfter").click(function () { $("<div class='redBox'>Iron man</div>").insertAfter('.greyBox'); }); $("#reset").click(function () { location.reload(); }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-after-insertAfter-example.html[デモを試してください]