jQuery 要素を追加するサンプル(before、after、prepend、append)

jQueryの要素を追加するサンプルです。
以下のjQueryのメソッドについてです。
before、after、prepend、append。

目次

beforeメソッド

  • jQueryのbeforeメソッドです。
  • 指定の要素の前に要素を追加します。
  • $(追加先).before(追加する要素)
  • 以下はjQueryサイトのbeforeメソッドのページです。
    http://api.jquery.com/before/

サンプル

beforeボタンを押すと指定の要素(div要素の枠線)の前に文言を追加します。

あいうえお

コード

上記サンプルのコードです。
16行目は、beforeメソッドで28行目の指定の要素(div要素の枠線)の前にP要素を追加します。
以下は、追加したときのイメージ図です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのサンプル</title>
<style>
#div1{
	border: 1px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1を押したとき
	$("#btn1").click(function() {
		$("#div1").before('<p id = "a1">before</p>');
		$("#btn1").prop("disabled", true);
	});
	// ボタン2を押したとき
	$("#btn2").click(function() {
		$("#a1").remove();
		$("#btn1").prop("disabled", false);
	});
});
</script>
</head>
<body >
<div id="div1">
	<p id="p1">あいうえお</p>
</div>
<input type="button" id="btn1" value="before">
<input type="button" id="btn2" value="戻す">
</body>
</html>

afterメソッド

  • jQueryのafterメソッドです。
  • 指定の要素の後に要素を追加します。
  • $(追加先).after(追加する要素)
  • 以下はjQueryサイトのafterメソッドのページです。
    http://api.jquery.com/after/

サンプル

afterボタンを押すと指定の要素(div要素の枠線)の後に文言を追加します。

あいうえお

コード

上記サンプルのコードです。
5行目は、afterメソッドで19行目の指定の要素(div要素の枠線)の後にP要素を追加します。
以下は、追加したときのイメージ図です。

<script>
$(function() {
	// ボタン3を押したとき
	$("#btn3").click(function() {
		$("#div2").after('<p id = "a2">after</p>');
		$("#btn3").prop("disabled", true);
	});
	// ボタン4を押したとき
	$("#btn4").click(function() {
		$("#a2").remove();
		$("#btn3").prop("disabled", false);
	});
});
</script>

<body >
<div id="div2">
	<p id="p2">あいうえお</p>
</div>
<input type="button" id="btn3" value="after">
<input type="button" id="btn4" value="戻す">
</body>

prependメソッド

  • jQueryのprependメソッドです。
  • 指定の要素の子要素の先頭に要素を追加します。
  • $(追加先).prepend(追加する要素)
  • 以下はjQueryサイトのprependメソッドのページです。
    http://api.jquery.com/prepend/

サンプル

prependボタンを押すと指定の要素の子要素の先頭(div要素の子要素P要素「あいうえお」の前)に文言を追加します。

あいうえお

コード

上記サンプルのコードです。
5行目は、prependメソッドで18行目の指定の要素の子要素の先頭にP要素を追加します。
以下は、追加したときのイメージ図です。

<script>
$(function() {
	// ボタン5を押したとき
	$("#btn5").click(function() {
		$("#div3").prepend('<p id = "a3">prepend</p>');
		$("#btn5").prop("disabled", true);
	});
	// ボタン6を押したとき
	$("#btn6").click(function() {
		$("#a3").remove();
		$("#btn5").prop("disabled", false);
	});
});
</script>

<body >
<div id="div3">
	<p id="p3">あいうえお</p>
</div>
<input type="button" id="btn5" value="prepend">
<input type="button" id="btn6" value="戻す">
</body>

appendメソッド

  • jQueryのappendメソッドです。
  • 指定の要素の子要素の最後に要素を追加します。
  • $(追加先).append(追加する要素)
  • 以下はjQueryサイトのappendメソッドのページです。
    http://api.jquery.com/append/

サンプル

appendボタンを押すと指定の要素の子要素の最後(div要素の子要素P要素「あいうえお」の後)に文言を追加します。

あいうえお

コード

上記サンプルのコードです。
5行目は、appendメソッドで18行目の指定の要素の子要素の最後にP要素を追加します。
以下は、追加したときのイメージ図です。

<script>
$(function() {
	// ボタン7を押したとき
	$("#btn7").click(function() {
		$("#div4").append('<p id = "a4">append</p>');
		$("#btn7").prop("disabled", true);
	});
	// ボタン8を押したとき
	$("#btn8").click(function() {
		$("#a4").remove();
		$("#btn7").prop("disabled", false);
	});
});
</script>

<body >
<div id="div4">
	<p id="p4">あいうえお</p>
</div>
<input type="button" id="btn7" value="append">
<input type="button" id="btn8" value="戻す">
</body>

関連の記事

jQuery 要素を置き換えるサンプル(replaceWithとreplaceAll)
jQuery 要素を移動するサンプル(appendTo、prependTo、insertAfter、insertBefore)
jQuery 要素を削除するサンプル(removeとempty)



△上に戻る