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 好評発売中