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[デモを試してください]
