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. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  2. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  3. no-image
  4. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  5. Accessible Mega Menu

コメント

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

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

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP