jQueryでHTMLを操作するシーン
HTMLを編集できるのであれば、わざわざjQueryを用いる必要はないですが、
下記のような場合には、jQueryを利用してHTMLの編集が必要になるかと思います。
- ユーザーの操作に応じて、HTMLの内容を変えたいとき
- ABテストを行う際に、元のファイルはいじらずに外部ファイル(jQuery)を利用する場合
- HTMLの編集権限がないが、HTMLを編集したいとき
HTMLを操作できるjQoery記述
要素の追加
指定したセレクタにクラスを追加
qiita.rb
$('セレクタ').addClass('クラス名');
<!-- 利用例 -->
$('.sample').addClass('example');
セレクト内を指定したhtmlに差替え
qiita.rb
$('セレクタ').html('エレメント');
<!-- 利用例 -->
$('.sample').html('<p>sample</p>');
指定したセレクタの前にエレメントを追加
qiita.rb
$('セレクタ').before('エレメント');
<!-- 利用例 -->
$('.sample').before('<p>sample</p>');
指定したエレメントをセレクトの前に追加(beforeと同じ動作)
qiita.rb
$('エレメント').insertBefore('セレクタ');
<!-- 利用例 -->
$('<p>sample</p>').insertBefore('.sample');
指定したセレクタ内の一番前にエレメントを追加
qiita.rb
$('セレクタ').prepend('エレメント');
<!-- 利用例 -->
$('.sample').prepend('<p>sample</p>');
指定したエレメントをセレクタ内の一番前に追加
qiita.rb
$('エレメント').prependTo('セレクタ');
<!-- 利用例 -->
$('<p>sample</p>').prependTo('.sample');
指定したセレクタの後にエレメントを追加
qiita.rb
$('セレクタ').after('エレメント');
<!-- 利用例 -->
$('.sample').after('<p>sample</p>');
指定したエレメントをセレクトの後に追加(afterと同じ動作)
qiita.rb
$('エレメント').insertAfter('セレクタ');
<!-- 利用例 -->
$('<p>sample</p>').insertAfter('.sample');
指定したセレクタ内の一番後ろにエレメントを追加
qiita.rb
$('セレクタ').append('エレメント');
<!-- 利用例 -->
$('.sample').append('<p>sample</p>');
指定したエレメントをセレクタ内の一番後ろに追加
qiita.rb
$('エレメント').appendTo('セレクタ');
<!-- 利用例 -->
$('<p>sample</p>').appendTo('.sample');
マッチしたエレメントを更にエレメントで囲む
qiita.rb
$('セレクタ').wrap('エレメント');
<!-- 利用例 -->
$('li').wrap('<ul></ul>');
マッチしたエレメントをまとめて新しいエレメントで囲む
qiita.rb
$('セレクタ').wrapAll('エレメント');
<!-- 利用例 -->
$('ul').wrapAll('<div></div>');
### マッチしたエレメントの内側をエレメントで囲む
```html:qiita.rb
$('セレクタ').wrapInner('エレメント');
<!-- 利用例 -->
$('li').wrapInner('<ul></ul>');
## 要素の入替
### 特定セレクタの値を任意のものに差し替える
```html:qiita.rb
$('セレクタ').attr({
'プロパティ': '値'
});
<!-- 利用例 -->
$('#sample').attr({
'id': 'sample--onather',
'src': 'xxx.html'
});
指定したセレクタのクラスのオン・オフを切替
qiita.rb
$('セレクタ').toggleClass('クラス名');
<!-- 利用例 -->
$("p").click(function () {
$(this).toggleClass("sample");
});
指定したセレクタのエレメントを差し替え
qiita.rb
$('セレクタ').replaceWith('エレメント');
$('エレメント').replaceAll('セレクタ');
<!-- 利用例 -->
$('#sample').replaceWith('<p>sample</p>');
$('<p>sample</p>').replaceAll('#sample');
要素の削除
特定セレクタの値を削除
qiita.rb
$('セレクタ').removeAttr({
'プロパティ': '値'
});
<!-- 利用例 -->
$('#sample').removeAttr({
'src': 'xxx.html'
});
指定したセレクタのクラスを削除
qiita.rb
$('セレクタ').removeClass('クラス名');
<!-- 利用例 -->
$('#sample').removeClass('example');
マッチしたエレメントを削除
qiita.rb
$('セレクタ').remove();
<!-- 利用例 -->
$('#sample').remove();
指定したセレクトの子要素を削除
qiita.rb
$('セレクタ').empty();
<!-- 利用例 -->
$('#sample').empty();
指定したセレクトの親要素を削除
qiita.rb
$('セレクタ').unwrap();
<!-- 利用例 -->
$('#sample').unwrap();