メソッドでDOM操作

要素からHTMLの文字列を取り出す

JS
1
2
3
<script>
$(要素).html();
</script>

要素にHTML文字列を入れる

JS
1
2
3
4
<script>
$(要素).html(HTML文字列);
$(要素).html(function(){処理});
</script>

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

JS
1
2
3
<script>
$(要素).text();
</script>

要素にテキストを入れる

JS
1
2
3
4
<script>
$(要素).text(テキスト文字列);
$(要素).text(function(){処理});
</script>

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

JS
1
2
3
<script>
$(要素).val();
</script>

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

JS
1
2
3
4
<script>
$(要素).val(値);
$(要素).val(function(インデックス, 値){処理});
</script>

条件に一致した要素にクラス指定を追加

JS
1
2
3
4
<script>
$(要素).addClass(クラス名);
$(要素).addClass(クロージャ);
</script>

要素にクラス指定されているか判定

JS
1
2
3
<script>
$(要素).hasClass(クラス名);
</script>

要素からクラスを削除

JS
1
2
3
4
<script>
$(要素).removeClass(クラス名);
$(要素).removeClass(function(クラス名){処理});
</script>

要素を削除

JS
1
2
3
<script>
$(要素).remove(セレクタ);
</script>

要素を一時的に削除

JS
1
2
3
<script>
$(要素).detach(セレクタ);
</script>

要素の子ノードを全て削除

JS
1
2
3
<script>
$(要素).empty();
</script>

要素のコピー

JS
1
2
3
4
5
<script>
$(要素).clone();
$(要素).clone(true);
$(要素).clone(false);
</script>

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

JS
1
2
3
4
<script>
$(要素).before(コンテンツ);
$(要素).before(function(){処理});
</script>

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

JS
1
2
3
4
<script>
$(要素).after(コンテンツ);
$(要素).after(function(){処理});
</script>

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

JS
1
2
3
<script>
$(内容).insertBefore(要素);
</script>
before()メソッドとは検索式とコンテンツの指定が反対になります。

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

JS
1
2
3
<script>
$(内容).insertAfter(要素);
</script>
after()メソッドとは検索式とコンテンツの指定が反対になります。

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

JS
1
2
3
4
<script>
$(要素).prepend(コンテンツ);
$(要素).prepend(function(){処理});
</script>

コンテンツを要素の先頭に追加

JS
1
2
3
<script>
$(コンテンツ).prependTo(要素);
</script>

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

JS
1
2
3
4
<script>
$(要素).append(コンテンツ);
$(要素).append(function(){処理});
</script>

コンテンツを要素の最後に追加

JS
1
2
3
<script>
$(コンテンツ).appendTo(要素);
</script>

要素の最初の属性値を取り出す

JS
1
2
3
<script>
var 変数 = $(要素).attr(属性名);
</script>

要素に属性値を入れる

JS
1
2
3
4
5
<script>
$(要素).attr(属性名, 値);
$(要素).attr(配列);
$(要素).attr(function(){処理});
</script>

指定した属性を要素から削除

JS
1
2
3
<script>
$(要素).removeAttr(属性名);
</script>

全ての要素を置換

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

全ての要素を置換

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

各要素に親要素を追加

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

要素の親要素を削除

JS
1
2
3
<script>
$(要素).unwrap();
</script>

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

JS
1
2
3
<script>
$(要素).wrapAll(親要素);
</script>

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

JS
1
2
3
<script>
$(要素).wrapInner(親要素);
</script>
マッチした要素の中のコンテンツに親要素を挿入