jQuery, DOM の操作メソッドの挙動の違いについて

2010年08月29日
blog
javascript

jQuery の DOM 操作メソッドの挙動の違いについてのまとめ。

以下の例の DOM 要素に対して、jQuery の DOM 操作メソッドを使って処理を行い、その挙動の違いについて調べてみた。

<div id="box" class="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

append, appendTo, prepend, prependTo について

append

append
指定した要素の最後に、引数で指定した内容を追加する。
$('#box').append('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
    <div><em>サンプルテキスト5（追加）</em></div>
</div>

appendTo

appendTo
指定した内容を、引数で指定した要素の最後に追加する。
$('<div><em>サンプルテキスト5（追加）</em></div>').appendTo('#box');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
    <div><em>サンプルテキスト5（追加）</em></div>
</div>

prepend

prepend
指定した要素の最初に、引数で指定した内容を追加する。
$('#box').prepend('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）</em></div>
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

prependTo

prependTo
指定した内容を、引数で指定した要素の最初に追加する。
$('<div><em>サンプルテキスト5（追加）</em></div>').prependTo('#box');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）</em></div>
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

after, insertAfter, before, insertBefore について

after

after
指定した要素の後ろに、引数で指定した内容を追加する。
$('#box').after('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>
<div><em>サンプルテキスト5（追加）</em></div>

insertAfter

insertAfter
指定した内容を、引数で指定した要素の後ろに追加する。
$('<div><em>サンプルテキスト5（追加）</em></div>').insertAfter('#box');

実行結果

<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>
<div><em>サンプルテキスト5（追加）</em></div>

before

before
指定した要素の前に、引数で指定した内容を追加する。
$('#box').before('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div><em>サンプルテキスト5（追加）</em></div>
<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

insertBefore

insertBefore
指定した内容を、引数で指定した要素の前に追加する。
$('<div><em>サンプルテキスト5（追加）</em></div>').insertBefore('#box');

実行結果

<div><em>サンプルテキスト5（追加）</em></div>
<div id="box">
    <div>サンプルテキスト1</div>
    <div>サンプルテキスト2</div>
    <div>サンプルテキスト3</div>
    <div>サンプルテキスト4</div>
</div>

wrap, wrapAll, wrapInner について

wrap

wrap
指定した要素を、引数に指定した内容で囲む。
指定した要素が複数の場合は各要素が個別に囲まれる。
$('#box div').wrap('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト1</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト2</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト3</div></em></div>
    <div><em>サンプルテキスト5（追加）<div>サンプルテキスト4</div></em></div>
</div>

wrapAll

wrapAll
指定した要素を、引数に指定した内容で囲む。
指定した要素が複数の場合は各要素をひとまとめにして囲まれる。
$('#box div').wrapAll('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div>
        <em>サンプルテキスト5（追加）
            <div>サンプルテキスト1</div>
            <div>サンプルテキスト2</div>
            <div>サンプルテキスト3</div>
            <div>サンプルテキスト4</div>
        </em>
    </div>
</div>

wrapInner

wrapInner
指定した要素の子要素を、引数で指定した内容で囲む。
指定した要素が複数の場合は各要素が個別に囲まれる。
$('#box div').wrapInner('<div><em>サンプルテキスト5（追加）</em></div>');

実行結果

<div id="box">
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト1</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト2</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト3</em></div></div>
    <div><div><em>サンプルテキスト5（追加）サンプルテキスト4</em></div></div>
</div>

デモページ

jQuery, DOM の操作メソッドの挙動の違いについて デモ

jQueryクックブック
jQueryクックブック

posted with amazlet at 10.08.29
jQuery Community Experts
オライリージャパン
売り上げランキング: 1476
Amazon.co.jp で詳細を見る
«
»