jQuery

HTMLの取得と変更

text()で、テキストの取得・変更ができましたが、HTMLのタグを含むテキストの変更をする場合は、html()という命令を使用します。

HTMLの変更

HTMLを変更するには、html(...)の内側に変更後のHTMLを書きます。

$("p#test1").html("実験してみる。");

サンプルコードみて頂ければ分かりますが、「これからhtml()で変更する。」という物が変わっているのが分かります。

HTMLの取得

値を取得するには「$("p#test1").html()」というようにhtml()で取得します。前回紹介したtext()と同様です。

HTMLの挿入

html()を使用すると、もともと存在していた要素の内容が全て上書きされてしまいます。

要素の内容を残したままでHTMLに追加するときは、要素を挿入する以下の命令prepend(),append(),before(),after()を使用します。

prepend()

指定した要素内部の先頭にHTMLを挿入するには、prepend()という命令を使います。html()と同様に追加したいHTMLを括弧内に書きます。

$("p#test2").prepend("先頭に文字を挿入！");

append()

指定した要素内部の最後にHTMLを挿入するには、append()という命令を使います。追加したいHTMLを括弧内に書きます。

$("p#test2").append("最後に文字を挿入！");

before()

指定した要素の前にHTMLを挿入するには、before()を使います。

$("p#test1").before("指定した要素の前に挿入<br>");

after()

指定した要素の後にHTMLを挿入するには、before()を使います。

$("p#test1").after("指定した要素の後に挿入<br>");

HTMLの移動

HTMLの要素を文内に新たに追加をするものではなく、もともと存在していた要素を文書内の位置を変更することができます。

prependTo()

指定した要素を他の要素の内部の先頭に移動させるには、prependTo()命令を使います。括弧内に移動先の要素をセレクターで指定します。

$("p#test2 strong").prependTo("p#test3");

appendTo()

指定した要素を他の要素の最後の先頭に移動させるには、appendTo()命令を使います。括弧内に移動先の要素をセレクターで指定します。

$("p#test3 strong").appendTo("p#test2");

insertBefore()

指定した要素を他の要素の前に移動したいときは、insertBefore()使います。

$("p#test3").insertBefore("p#test1");

insertAfter()

指定した要素を他の要素の後に移動したいときは、insertAfter()使います。

$("p#test2").insertAfter("p#test3");

実行結果はこちらです。

-jQuery
-, , , , , ,