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メソッドでも追加したりできるので、どんな時にどんなメソッドを使うべきなのかまだわかんない状態なんですが、使いながら覚えていければいいなと思ってます。

WordPressでコメント欄などに表示されるアバター「Gravatar」に登録してみる前のページ

今年(2011)最後に自分のWebサイトのファビコンを作成して設置してみる次のページ

関連記事

  1. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. jQuery UI Month Picker Plugin
  4. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  5. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  6. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

コメント

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

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

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP