jQuery　各要素の前後にコンテンツを挿入する　before　after　prepend　append

今回は、jQueryの「before」,「after」,「prepend」,「append」について書きます。

これらは、各要素の前後にコンテンツを挿入できるメソッドです。

まず、「before」から書いていきます。

「before」は、要素の前にコンテンツを挿入します。

使い方は、こんな感じです。

$(セレクタ).before(コンテンツ);

実行のプログラムで使うと、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
		<p>Apple</p>
		<p>Bob</p>
		<p>Color</p>
	<script>
		$(function(){
			$('p').before('<h3>Here!</h3>');
		});
	</script>
</body>
</html>

実行結果
f:id:gupuru:20140527002344p:plain
各要素の前に「Here!」という文字が挿入されています。

次に、「after」について書きます。

「after」は、要素の後ろにコンテンツを挿入します。

使い方は、こんな感じです。

$(セレクタ).after(コンテンツ);

実行のプログラムで使うと、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
		<p>Apple</p>
		<p>Bob</p>
		<p>Color</p>
	<script>
		$(function(){
			$('p').after('<h3>Here!</h3>');
		});
	</script>
</body>
</html>

実行結果
f:id:gupuru:20140527002855p:plain
各要素の後ろに「Here!」という文字が挿入されています。

次に「prepend」について書きます。

「prepend」は、各要素の先頭にコンテンツを挿入します。

使い方は、こんな感じです。

$(セレクタ).prepend(コンテンツ);

実行のプログラムで使うと、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
		<ul>
			<li>Apple</li>
			<li>Bob</li>
			<li>Color</li>
		</ul>
	<script>
		$(function(){
			$('ul').prepend('<li>Here!</li>');
		});
	</script>
</body>
</html>

実行結果
f:id:gupuru:20140527003357p:plain
要素の先頭に「Here!」という文字が挿入されています。
先頭という所が、「before」との違いです。「before」は一つ前という所に注意が必要です。

次に「append」について書きます。

「append」は、各要素の末尾（一番後ろ）にコンテンツを挿入します。

使い方は、こんな感じです。

$(セレクタ).append(コンテンツ);

実行のプログラムで使うと、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
		<ul>
			<li>Apple</li>
			<li>Bob</li>
			<li>Color</li>
		</ul>
	<script>
		$(function(){
			$('ul').append('<li>Here!</li>');
		});
	</script>
</body>
</html>