第15回 HTMLの挿入 jQueryによるJavaScript入門

こんにちは。to-Rの西畑です。jQueryによるJavaScript入門第15回はHTMLの挿入について解説したいと思います。

htmlの制御では指定した要素の内側のHTMLを変更する方法を解説しましたが、今回は追加です。

append

appendは指定した要素の最後にHTMLを追加する為の関数です。

$("指定した要素").append("追加するHTML")

サンプル

サンプルではボタンがクリックされた際にul要素の最後にappendという中身のli要素を追加しています。

$(function(){
	$("input[value=append]").click(function(){
		$("ul").append("<li>append</li>")
	})
});

prepend

prependは指定した要素の最初にHTMLを追加する為の関数です。

$("指定した要素").prepend("追加するHTML")

サンプル

after

afterは指定した要素の後ろにHTMLを追加する為の関数です。

$("指定した要素").after("追加するHTML")

サンプルではul要素の後ろにp要素を追加しています。

$("ul").after("<p>after</p>")

サンプル

before

beforeは指定した要素の前にHTMLを追加する為の関数です。

$("指定した要素").before("追加するHTML")

サンプルではul要素の前にp要素を追加しています。

$("ul").before("<p>before</p>")

サンプル

【PR】現場のプロから学ぶXHTML+CSS 好評発売中

コメント / トラックバック 3 件

この記事へのコメント・トラックバックを追いかけることができます。(RSS 2.0

  1. massa より:

    いやぁ、なんだか第1回から第15回までスムーズに誘導されてしまい、
    気付けば1日でjQueryの大枠をつかむことができていました。
    進度もちょうどよく、お金を払いたくなるぐらい(笑)スバラシイ講座でした。
    本当にありがとうございました!

コメントをどうぞ

トラックバック URL

トラックバック

  1. jQueryでHTMLを読み込む手法

    リクリにjQueryでHTMLを読み込む手法がのせてありました。http://w…

  2. […] 第15回 HTMLの挿入 jQueryによるJavaScript入門 […]