2019-07-08

jQueryでHTMLを操作する

jQueryスクリプトを通して、HTMLファイル内の要素を追加、変更したり削除することが可能です。操作を行いたいHTML要素をセレクタで指定し、jQueryオブジェクトを生成します。生成したjQueryオブジェクトに対して、メソッドで変更命令を実行します。

$("セレクタ").命令()

textメソッド テキストを操作

textメソッドはjQueryオブジェクトで指定したセレクタの、要素内にあるテキストを操作できます。

テキストの取得

メソッドの括弧内に何も記述しない場合、セレクタで指定した要素内にあるテキストを取得することができます。

$("セレクタ").text();

テキストの挿入(書き換え)

テキストメソッドの括弧内にテキストを記述すると、指定セレクタの要素内へテキストを挿入することができます。すでにテキストが存在する場合は、新しいテキストに書き換えられます。

$("セレクタ").text("挿入するテキスト");

htmlメソッド HTML要素を操作

htmlメソッドはjQueryオブジェクトで指定したセレクタの、要素内にあるHTMLを操作できます。

HTMLの取得

メソッドの括弧内に何も記述しない場合、セレクタで指定した要素内にあるHTMLを取得することができます。

$("セレクタ").html();

HTMLの挿入(書き換え)

htmlメソッドの括弧内にHTMLを記述すると、指定セレクタの要素内へHTMLを挿入することができます。すでにHTMLが存在する場合は、新しいHTMLに書き換えられます。

$("セレクタ").html("<div>挿入するHTML</div>");

prependメソッド 要素の先頭に要素を挿入

prependメソッドはセレクタで指定した要素の先頭に要素を挿入できます。

$("セレクタ").prepend("<div>挿入する要素</div>");

appendメソッド 要素の末尾に要素を挿入

appendメソッドはセレクタで指定した要素の末尾に要素を挿入できます。

$("セレクタ").append("<div>挿入する要素</div>");

beforeメソッド 要素の前に要素を挿入

beforeメソッドはセレクタで指定した要素の前に要素を挿入できます。

$("セレクタ").before("<div>挿入する要素</div>");

afterメソッド 要素の後に要素を挿入

afterメソッドはセレクタで指定した要素の後に要素を挿入できます。

$("セレクタ").after("<div>挿入する要素</div>");

prependToメソッド 要素の先頭に要素を挿入

prependToメソッドはセレクタで指定した要素の先頭に要素を挿入できます。prependメソッドとは書式が異なります。

$("<div>挿入する要素</div>").prependTo("セレクタ");

appendToメソッド 要素の末尾に要素を挿入

appendToメソッドはセレクタで指定した要素の末尾に要素を挿入できます。appendメソッドとは書式が異なります。

$("<div>挿入する要素</div>").appendTo("セレクタ");

insertBeforeメソッド 要素の前に要素を挿入

insertBeforeメソッドはセレクタで指定した要素の前に要素を挿入できます。beforeメソッドとは書式が異なります。

$("<div>挿入する要素</div>").insertBefore("セレクタ");

insertAfterメソッド 要素の後に要素を挿入

insertAfterメソッドはセレクタで指定した要素の後に要素を挿入できます。afterメソッドとは書式が異なります。

$("<div>挿入する要素</div>").insertAfter("セレクタ");

wrapメソッド 要素をタグで囲む

wrapメソッドはセレクタで指定した要素を、指定したHTMLタグで囲むことができます。

$("セレクタ").wrap("<div class="wrap"></div>");

wrapAllメソッド 要素全体をタグで囲む

wrapAllメソッドはセレクタで指定した要素をまとめて、指定したHTMLタグで囲むことができます。

$("セレクタ").wrapAll("<div class="wrap"></div>");

wrapInnerメソッド 要素の内容をタグで囲む

wrapInnerメソッドはセレクタで指定した要素の内容を、指定したHTMLタグで囲むことができます。

$("セレクタ").wrapInner("<div class="wrap"></div>");

unwrapメソッド 要素を囲むHTMLタグを取り除く

unwrapメソッドはセレクタで指定した各要素を囲むHTMLタグを取り除くことができます。要素自体は削除されず、あくまで要素を囲むタグを削除します。

$("セレクタ").unwrap();

replaceWithメソッド 要素を置き換える

replaceWithメソッドはセレクタで指定した要素を、指定したHTMLタグと置き換えることができます。

$("セレクタ").replaceWith("<div class="replaced">置き換え後の要素</div>");

replaceAllメソッド 要素を置き換える

replaceAllメソッドはセレクタで指定した要素を、指定したHTMLタグと置き換えることができます。replaceWithメソッドとは書式が異なります。

$("<div class="replaced">置き換え後の要素</div>").replaceAll("セレクタ");

emptyメソッド 子要素を全て削除する

emptyメソッドはセレクタで指定した要素の子要素を全て削除することができます。

$("セレクタ").empty();

removeメソッド 要素を全て削除する

removeメソッドはセレクタで指定した要素の要素を全て削除することができます。

$("セレクタ").remove();

まとめ

jQueryの主な用途の一つはDOMの操作です。このページで紹介したメソッドを使いこなせばDOMも自由自在に書き換えられます。
ここではDOM操作の基本的な機能しか紹介していませんが、実際にはイベント処理と合わせて使うことが多いので、まずはこういう処理ができるということだけでも押さえておきましょう。