第15回 HTMLの挿入 jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

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

2008 年 12 月 9 日

西畑一馬

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

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

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

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

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

$(function(){
	$("input[value=append]").click(function(){
		$("ul").append("&lt;li&gt;append&lt;/li&gt;")
	})
});

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

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

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

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

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

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

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

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

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

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

Re:Creator’s Kansai