デモ - 【jQuery入門 6】要素の書き換え 追加・削除

DEMO 01 : text()

要素のテキストを取得する

元テキスト

変更後

DEMO 02 : html()

要素のHTMLを取得・変更する

元テキスト

変更後

DEMO 03 : append()

class「demo03_trigger」を持つ要素「末尾にとぁー」がクリックされたとき、class「demo03_target」を持つ要素「空飛ぶおしり」の末尾に「ぬ」を挿入する

空飛ぶおしり

DEMO 04 : prepend()

class「demo04_trigger」を持つ要素「先頭にとぁー」がクリックされたとき、class「demo04_target」を持つ要素「空を飛ばないおしり」の先頭に「む」を挿入する

空を飛ばないおしり

DEMO 05 : appendTo()

class「demo05_trigger」を持つ要素「末尾にな なにをする きさまらー！」がクリックされたとき、class「demo05_target」を持つ要素「倒置法がこれできっと可能になる」末尾に「倒置法が」を移動させる

倒置法がこれできっと可能になる

DEMO 06 : prependTo()

class「demo06_trigger」を持つ要素「先頭にな なにをする きさまらー！」がクリックされたとき、class「demo06_target」を持つ要素「ペンですかそれは」先頭に「それは」を移動させる

ペンですかそれは

DEMO 07 : before()

class「demo07_trigger」を持つ要素「おしりふりふりもんだみん」がクリックされたとき、class「demo07_target」を持つ要素「プリプリプリプリプリプリプリプリプリ」の前に「おしり合い」を挿入する

DEMO 08 : after()

class「demo08_trigger」を持つ要素「飛び出すおしり」がクリックされたとき、class「demo08_target」を持つ要素「愛すべき」の後に「えびちり」を挿入する

DEMO 09 : remove()

class「demo09_trigger」を持つ要素「さくじょさくじょさくじょ」がクリックされたとき、class「demo09_target2」を持つ要素「出した子」を削除

おしりを

出した子

大魔王