メソッドでDOM操作

要素（エレメント）からHTMLの文字列を取り出す

1
$(エレメント).html();

エレメントにHTML文字列を入れる

1
2
$(エレメント).html(HTML文字列);
$(エレメント).html(function(){処理});

要素からテキストを取り出す

1
$(要素).text();

要素にテキストを入れる

1
2
$(要素).text(テキスト文字列);
$(要素).text(function(){処理});

フォームの要素から値を取り出す

1
$(要素).val();

フォーム要素に値を入れる

1
2
$(要素).val(値);
$(要素).val(function(インデックス, 値){処理});

条件に一致した要素（エレメント）にクラス指定を追加

1
2
$(エレメント).addClass(クラス名);
$(エレメント).addClass(クロージャ);

エレメントにクラス指定されているか判定

1
$(エレメント).hasClass(クラス名);

エレメントからクラスを削除

1
2
$(エレメント).removeClass(クラス名);
$(エレメント).removeClass(function(クラス名){処理});

エレメントを削除

1
$(エレメント).remove(セレクタ);

エレメントを一時的に削除

1
$(エレメント).detach(セレクタ);

エレメントの子ノードを全て削除

1
$(エレメント).empty();

エレメント（element）のコピー

1
2
3
$(element).clone();
$(element).clone(true);
$(element).clone(false);

条件に一致したelementの直前にコンテンツを挿入

1
2
$(element).before(コンテンツ);
$(element).before(function(){処理});

条件に一致したelementの直後にコンテンツを挿入

1
2
$(element).after(コンテンツ);
$(element).after(function(){処理});

条件にマッチしたelementの直前にコンテンツを挿入

1
$(内容).insertBefore(element);
before()メソッドとは検索式とコンテンツの指定が反対になります。

条件にマッチしたelementの直後にコンテンツを挿入

1
$(内容).insertAfter(element);
after()メソッドとは検索式とコンテンツの指定が反対になります。

element内の先頭にコンテンツを挿入

1
2
$(element).prepend(コンテンツ);
$(element).prepend(function(){処理});

コンテンツをelementの先頭に追加

1
$(コンテンツ).prependTo(element);

element内の最後にコンテンツを追加

1
2
$(element).append(コンテンツ);
$(element).append(function(){処理});

コンテンツをelementの最後に追加

1
$(コンテンツ).appendTo(element);

elementの最初の属性値を取り出す

1
var 変数 = $(element).attr(属性名);

element（エレメント）に属性値を入れる

1
2
3
$(エレメント).attr(属性名, 値);
$(エレメント).attr(配列);
$(エレメント).attr(function(){処理});

指定した属性をエレメントから削除

1
$(エレメント).removeAttr(属性名);

全ての要素を置換

1
2
$(要素).replaceWith(置換コンテンツ);
$(要素).replaceWith(function(){処理});
replaceAll()とは検索式とコンテンツの指定が反対になります。

全ての要素を置換

1
$(置換コンテンツ).replaceAll(要素);
replaceWith()とは検索式とコンテンツの指定が反対になります。

各要素に親要素を追加

1
2
$(要素).wrap(親要素);
$(要素).wrap(function(){処理});
マッチした要素そのものに挿入します。

要素の親要素を削除

1
$(要素).unwrap();

マッチした要素を全て親要素で包む

1
$(要素).wrapAll(親要素);

各要素の内側に親要素を追加

1
$(要素).wrapInner(親要素);
マッチした要素の中のコンテンツに親要素を挿入