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. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  2. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  3. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  6. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

コメント

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

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

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP