SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

これまでのあらすじ

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

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

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

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

DEMO 01 : text()

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

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

DEMO 01

text()

HTML

<p><strong>元テキスト</strong></p>
<div class="demo01_trigger">ほにゃほにゃげほふげぬきゃむてようぷいにゅ</div>

<p><strong>変更後</strong></p>
<div class="demo01_target">ほにゃほにゃげほふげぬきゃむてようぷいにゅ</div>

jQuery

$(function() {

    $('.demo01_target').text('変更したんだぞ');

});

DEMO 02 : html()

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

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

DEMO 02

html()

HTML

<p><strong>元テキスト</strong></p>
<div class="demo02_trigger">ぬぬんがぬ</div>

<p><strong>変更後</strong></p>
<div class="demo02_target">ぬぬんがぬ</div>

jQuery

$(function() {

    $('.demo02_target').html('ぬぬんがぬ');

});

DEMO 03 : append()

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

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

DEMO 03

append()

HTML

<button class="btn_trigger demo03_trigger">末尾にとぁー</button>
<p class="demo03_target">空飛ぶおしり</p>

jQuery

$(function() {

    $('.demo03_trigger').on('click', function(){
		$('.demo03_target').append('ぬ');
	});

});

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

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

DEMO 04 : prepend()

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

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

DEMO 04

prepend()

HTML

<button class="btn_trigger demo04_trigger">先頭にとぁー</button>
<p class="demo04_target">空を飛ばないおしり</p>

jQuery

$(function() {

    $('.demo04_trigger').on('click', function(){
		$('.demo04_target').prepend('む');
	});

});

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

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

DEMO 05 : appendTo()

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

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

DEMO 05

appendTo()

HTML

<button class="btn_trigger demo05_trigger">末尾にな なにをする きさまらー!</button>
<p class="demo05_target"><span class="demo05_target2">倒置法が</span>これできっと可能になる</p>

jQuery

$(function() {

    $('.demo05_trigger').on('click', function(){
		$('.demo05_target2').appendTo('.demo05_target');
	});

});

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

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

DEMO 06 : prependTo()

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

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

DEMO 06

prependTo()

HTML

<button class="btn_trigger demo06_trigger">先頭にな なにをする きさまらー!</button>
<p class="demo06_target">ペンですか<span class="demo06_target2">それは</span></p>

jQuery

$(function() {

    $('.demo06_trigger').on('click', function(){
		$('.demo06_target2').prependTo('.demo06_target');
	});

});

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

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

DEMO 07 : before()

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

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

DEMO 07

before()

HTML

<button class="btn_trigger demo07_trigger">おしりふりふりもんだみん</button>
<div class="demo07_target">
    <p class="demo07_target2">プリプリプリプリプリプリプリプリプリ</p>
</div>

jQuery

$(function() {

    $('.demo07_trigger').on('click', function(){
		$('.demo07_target2').before('おしり合い');
	});

});

DEMO 08 : after()

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

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

DEMO 08

after()

HTML

<button class="btn_trigger demo08_trigger">飛び出すおしり</button>
<div class="demo08_target">
    <p class="demo08_target2">愛すべき</p>
</div>

jQuery

$(function() {

    $('.demo08_trigger').on('click', function(){
		$('.demo08_target2').after('えびちり');
	});

});

DEMO 09 : remove()

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

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

DEMO 09

remove()

HTML

<button class="btn_trigger demo09_trigger">さくじょさくじょさくじょ</button>
<p class="demo09_target">おしりを</p>
<p class="demo09_target2">出した子</p>
<p class="demo09_target3">大魔王</p>

jQuery

$(function() {

    $('.demo09_trigger').on('click', function(){
		$('.demo09_target2').remove();
	});

});

まとめ

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

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

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation