jQueryのDOMに関する操作


ここではjQueryによるDOMの操作について紹介します。

🍮 HTMLの加工

要素内の末尾に引数を追加：append

  • fuga
を
  • fuga
  • 要素を末尾に追加
とします。

$('ul').append('
  • 要素を末尾に追加
    • '    );

    要素をほかの要素内の末尾に追加：appendTo

    $(A).append(B)と$(B).appendTo(A)が同じ動作になります。

    $('
  • 要素を末尾に追加
    • '    ).appendTo('ul');

    要素内の先頭に引数を追加：prepend

    • fuga
    を
    • hoge
    • 要素を先頭に追加
    とします。

    $('ul').prepend('
  • 要素を先頭に追加
    • '    );

    要素をほかの要素内の先頭に追加：prependTo

    $(A).prepend(B)と$(B).prependTo(A)が同じ動作になります。

    $('
  • 要素を先頭に追加'
    • ).prependTo('ul');

    要素外の末尾に引数を追加：after

    • fuga
    を
    • hoge

    最後に追加

    とします。

    $('ul').after('
    最後に追加
    '    );

    要素外の末尾に引数を追加：insertAfter

    $(A).after(B)と$(B).insertAfter(A)が同じ動作になります。

    $('
    最後に追加
    '    ).insertAfter('ul');

    要素外の末尾に引数を追加：before

    • fuga
    を

    最初に追加

    • hoge
    とします。

    $('ul').before('
    最初に追加
    '    );

    要素外の末尾に引数を追加：insertAfter

    $(A).before(B)と$(B).insertBefore(A)が同じ動作になります。

    $('
    最初に追加
    '    ).insertAfter('ul');

    要素の外側を引数のHTMLタグで囲む：wrap

    hoge

    を

    hoge

    にします。

    $('p').wrap('
    '
    );

    要素の内側を引数のHTMLタグで囲む：wrapInner

    hoge

    を

    hoge

    にします。

    $('p').wrapInner('
    '
    );

    要素の内側を引数のHTMLタグで囲む：wrapAll

    hoge

    fuga

    を

    hoge

    fuga

    にします。

    $('p').wrapInner('
    '
    );

    🐹 フォーム要素の変更

    チェックボックスの情報取得：prop

    チェックボックスのチェックが入っているかをチェックするのは、次のコマンドです。

    // チェックボックスのチェックしているかどうかを返す
    $('input:checkbox').prop("checked"); //=> true / false

    // チェックを行う場合
    $('input:checkbox').prop("checked", true);

    🎳 inputに対してdisabledを設定、解除

    jQueryでinputタグに対してdisabledに設定する or 設定を解除するコードは次の通りです。

    $("#hoge").prop('disabled', true);

    $("#hoge").prop('disabled', false);

    🍣 デモ

    紹介したメソッドの動作確認は次のサイトで確認できます。

    DOM要素追加メソッドまとめ

    🏀 参考リンク

    🖥 VULTRおすすめ

    「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

    📚 おすすめの書籍