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


jquery


jquery
操作