jQueryのafter

Question

<script>
  $(function() {
    var hotel = $("<div>", {
      "class": "hotel"
    });
    var hotelpics = $("<div>", {
      "class": "hotelpics"
    });
    var mainpic = $("<div>", {
      "class": "mainpic"
    });
    var others = $("<div>", {
      "class": "others"
    });
    var hotelinfo = $("<div>", {
      "class": "hotelinfo"
    });
    var hotelname = $("<h2>", {
      "class": "hotelname"
    });
    var tags = $("<div>", {
      "class": "tags"
    });
    var rating = $("<div>", {
      "class": "rating"
    });
    var price = $("<div>", {
      "class": "price"
    });
    var clear = $("<div>", {
      "class": "clear"
    });
   hotelpics.append(mainpic,others);
    hotelinfo.append(hotelname,tags,rating,price);
    hotelpics.after(hotelinfo);
    console.log(hotelpics);
  });
</script>

こ作成しているタグの構造としては以下になります。

  
          <div class="hotelpics">
            <div class="mainpic">
      
            </div>
            <div class="others">
            </div>
          </div>
          <div class="hotelinfo">
            <h2 class="hotelname">
            </h2>
            <div class="tags">
            </div>
            <div class="rating">
            </div>
            <div class="price">
            </div>
          </div>
          <div class="clear"></div>

<div class="hotelinfo">
<h2 class="hotelname"></h2>
<div class="tags"></div>
<div class="rating"></div>
<div class="price"></div>
</div>

しかしafterを使用しているのに,hotelinfoしか表示されません。
欲しい結果としては、一つ上のHTMLタグです。afterは要素の外、appendは要素の中と思うのですが。

Answer 1

documentに挿入されるまで、jQueryオブジェクトは親要素ノードとしての扱いはされても、NodeListと同等の扱いではありません(DOM APIと互換性はありません)。
兄弟要素ノード群としての扱いを期待するなら、jQuery#add() で追加して下さい。

• .add() | jQuery API Documentation

あるいは、DocumentFragmentで管理して下さい。

• DocumentFragment - Web API | MDN

Re: YutaNkai さん

Comments

[Chandler_Bing]

ありがとうございました。

Answer 2

参考リンクだけですが。
jQuery's after method not working with newly created elements

Comments

[Chandler_Bing]

ありがとうございます。とりあえずadd使えば良さそうなので、それ使います。