jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

jQueryでHTML要素を追加するメソッドが色々あるので整理するために、ちょっとまとめてみました。似たようなメソッドの名前なので混乱しそうです。大きく分けるとbefore,after,prepend,appendと、insertBefor,insertAfter,prependTo,appendToが似ているのでそれらの違いをまとめてみます。

before, after, prepend, append

挿入先の要素を基点にした場合、beforeとafterは外側に挿入されます。逆にprependとappendは挿入先要素の内側に挿入されるんですね。使い方は以下です。

JavaScript

<script type="text/javascript">
$(function(){
     $('#sample')
         .before('<div>before</div>')
         .after('<div>after</div>')
         .prepend('<span>prepend</span>')
         .append('<span>append</span>');
});
</script>

HTML

<p id="sample">サンプル</p>

実行するとこのように追加されています。

<div>before</div>
<p id="sample">
<span>prepend</span>
サンプル
<span>append</span>
<div>after</div>

各メソッドによって挿入される場所が違うのがわかりますね。

insertAfter, insertBefore, prependTo, appendTo

こちらも要素を挿入するメソッドなんですが、書き方が少し違ってきます。指定する挿入先の要素を最後に記述するので、さっきとは逆の書き方になります。実際の使い方はこんな感じです。

JavaScript

<script type="text/javascript">
$(function(){
     $('<div>insertBefore</div>').insertBefore('#sample');
     $('<div>insertAfter</div>').insertAfter('#sample');
     $('<span>prependTo</span>').prependTo('#sample');
     $('<span>appendTo</span>').appendTo('#sample');
});
</script>

HTML

<p id="sample">サンプル</p>

これで実行してみると以下のように挿入されます。

<div>insertBefore</div>
<p>
<span>prependTo</span>
サンプル
<span>appendTo</span>
</p>
<div>insertAfter</div>

ちゃんと挿入されてますね。ちなみに移動なんかもできちゃいます。

JavaScript

<script type="text/javascript">
$(function(){
     $('span').insertBefore('#sample');
});
</script>

HTML

<p id="sample">サンプル<span>移動</span></p>

これを実行するとspan要素が#sampleの外側に移動します。

<span>移動</span>
<p id="sample">サンプル</p>

まとめ

結構使う頻度が高そうなメソッドなので是非覚えておきたいですね。上記以外にもhtml、textメソッドでも追加したりできるので、どんな時にどんなメソッドを使うべきなのかまだわかんない状態なんですが、使いながら覚えていければいいなと思ってます。

関連記事

  1. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  2. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  5. Filterable Product Grid
  6. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP