ほいほい。まりぞーです。
前回から引き続き、要素をいじります。
前回 : 【jQuery入門 5】要素の属性の取得と書き換え

書き換えたり追加したり削除します。

今回もデモがあったりします。

目次

  1. 要素の書き換え・追加・削除の一覧
  2. text()
  3. html()
  4. append()
  5. prepend()
  6. appendTo()
  7. prependTo()
  8. before()
  9. after()
  10. remove()
  11. jQuery入門ガイド

要素の書き換え・追加・削除の一覧

  • .text()
    要素のテキストを取得
  • .html()
    要素のHTMLを取得
  • .append()
    要素の末尾に、設定したコンテンツを挿入
  • .prepend()
    要素の先頭に、設定したコンテンツを挿入
  • .appendTo()
    コンテンツを、設定した要素の末尾に挿入
  • .prependTo()
    コンテンツを、設定した要素の先頭に挿入
  • .before()
    要素のを挿入
  • .after()
    要素のを挿入
  • .remove()
    要素を削除

text()

公式ドキュメント : .text() | jQuery API Documentation

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

DEMO 01

text()

HTML

jQuery

html()

公式ドキュメント : .html() | jQuery API Documentation

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

DEMO 02

html()

HTML

jQuery

append()

公式ドキュメント : .append() | jQuery API Documentation

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

DEMO 03

append()

HTML

jQuery

append()では、コンテンツを挿入するコンテナとなる要素をセレクタとして先に記述します。

appendTo()では、挿入するコンテンツをセレクタとして先に記述します。

prepend()

公式ドキュメント : .prepend() | jQuery API Documentation

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

DEMO 04

prepend()

HTML

jQuery

prepend()では、コンテンツを挿入するコンテナとなる要素をセレクタとして先に記述します。

prependTo()では、挿入するコンテンツをセレクタとして先に記述します。

appendTo()

公式ドキュメント : .appendTo() | jQuery API Documentation

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

DEMO 05

appendTo()

HTML

jQuery

append()では、コンテンツを挿入するコンテナとなる要素をセレクタとして先に記述します。

appendTo()では、挿入するコンテンツをセレクタとして先に記述します。

prependTo()

公式ドキュメント : .prependTo() | jQuery API Documentation

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

DEMO 06

prependTo()

HTML

jQuery

prepend()では、コンテンツを挿入するコンテナとなる要素をセレクタとして先に記述します。

prependTo()では、挿入するコンテンツをセレクタとして先に記述します。

before()

公式ドキュメント : .before() | jQuery API Documentation

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

DEMO 07

before()

HTML

jQuery

after()

公式ドキュメント : .after() | jQuery API Documentation

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

DEMO 08

after()

HTML

jQuery

remove()

公式ドキュメント : .remove() | jQuery API Documentation

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

DEMO 09

remove()

HTML

jQuery

いかがでしたかー!次回はCSSをいじったりします。
次回もよろしくお願いします(°ω°)ノシ

第7回目はこちら。
【jQuery入門 7】CSSの取得・追加・変更をしよう

あわせて読みたい記事