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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

    📚 おすすめの書籍