jQuery

before（）

および

insertBefore（）

メソッドは、同じタスクを実行しています。一致した要素の前にテキストまたはhtmlコンテンツを追加します。主な違いは構文にあります。

例えば、 

<div class="prettyBox">I'm a ipman</div>
<div class="prettyBox">I'm a ipman 2</div>

1. $（ ‘セレクター’）. before（ ‘new content’）;

$('.prettyBox').before("<div class='newPrettybox'>Iron man</div>");

2. $（ ‘新しいコンテンツ’）. insertBefore（ ‘selector’）;

$("<div class='newPrettybox'>Iron man</div>").insertBefore('.prettyBox');

結果

上記の両方のメソッドは同じタスクを実行していますが、構文が異なると、

before（）

または

insertBefore（）

の後の新しい内容は 

<div class='newPrettybox'>Iron man</div>
<div class="prettyBox">
   I'm a ipman
</div>

<div class='newPrettybox'>Iron man</div>
<div class="prettyBox">
   I'm a ipman 2
</div>

自分で試してみてください

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    .prettyBox{
        padding:8px;
        background: grey;
        margin-bottom:8px;
        width:300px;
        height:100px;
    }
    .newPrettybox{
        padding:8px;
        background: red;
        margin-bottom:8px;
        width:200px;
        height:50px;
    }
</style>

</head>
<body>
  <h1>jQuery before() and insertBefore() example</h1>

  <div class="prettyBox">Ip man</div>

  <div class="prettyBox">Ip man 2</div>

  <p>
  <button id="before">before()</button>
  <button id="insertBefore">insertBefore()</button>
  <button id="reset">reset</button>
  </p>

<script type="text/javascript">

    $("#before").click(function () {

      $('.prettyBox').before("<div class='newPrettybox'>Iron man</div>");

    });

    $("#insertBefore").click(function () {

      $("<div class='newPrettybox'>Iron man</div>").insertBefore('.prettyBox');

    });

    $("#reset").click(function () {
      location.reload();
    });

</script>
</body>
</html>


デモを試してください


jquery


jquery
操作