jQuery 要素を追加する(before/after/prepend/append)

nas

jQueryの要素を追加するサンプルです。
before、after、prepend、appendメソッドを使用します。

目次

指定の要素の前に追加する(beforeメソッド)

指定の要素の前に追加するサンプルです。
ボタンを押すとbeforeメソッドでdiv要素の枠線の前に文言を追加します。

あいうえお

コード

上記サンプルのコードです。

<style>
#div1{border: 1px solid #000;}
</style>

<div id="div1">
	<p id = "p1">あいうえお</p>
</div>
<input type="button" id="button1" value="ボタン1">
<input type="button" id="button2" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		$("#div1").before('<p id = "a1">before</p>');
		$("#button1").prop("disabled", true);
	});

	$("#button2").click(function() {
		$("#a1").remove();
		$("#button1").prop("disabled", false);
	});
});
</script>

16行目は、beforeメソッドで5行目のdiv要素の前にP要素を追加します。
以下は、追加したときのイメージ図です。

21行目は、removeメソッドで追加した要素を削除しています。

beforeメソッド

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

 

指定の要素の後に追加する(afterメソッド)

指定の要素の後に追加するサンプルです。
ボタンを押すとafterメソッドでdiv要素の枠線の後に文言を追加します。

あいうえお

コード

上記サンプルのコードです。

<style>
#div2{border: 1px solid #000;}
</style>

<div id="div2">
	<p id = "p2">あいうえお</p>
</div>
<input type="button" id="button3" value="ボタン2">
<input type="button" id="button4" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		$("#div2").after('<p id = "a2">after</p>');
		$("#button3").prop("disabled", true);
	});

	$("#button4").click(function() {
		$("#a2").remove();
		$("#button3").prop("disabled", false);
	});
});
</script>

16行目は、afterメソッドで5行目のdiv要素の後にP要素を追加します。
以下は、追加したときのイメージ図です。

21行目は、removeメソッドで追加した要素を削除しています。

afterメソッド

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

 

指定の要素の子要素の先頭に追加する(prependメソッド)

指定の要素の子要素の先頭に追加するサンプルです。
ボタンを押すとprependメソッドでdiv要素の子要素(pタグ)「あいうえお」の前に文言を追加します。

あいうえお

コード

上記サンプルのコードです。

<style>
#div3{border: 1px solid #000;}
</style>

<div id="div3">
	<p id = "p3">あいうえお</p>
</div>
<input type="button" id="button5" value="ボタン3">
<input type="button" id="button6" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button5").click(function() {
		$("#div3").prepend('<p id = "a3">prepend</p>');
		$("#button5").prop("disabled", true);
	});

	$("#button6").click(function() {
		$("#a3").remove();
		$("#button5").prop("disabled", false);
	});
});
</script>

16行目は、prependメソッドで5行目のdiv要素の子要素の先頭にP要素を追加します。
以下は、追加したときのイメージ図です。

21行目は、removeメソッドで追加した要素を削除しています。

prependメソッド

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

 

指定の要素の子要素の最後に追加する(appendメソッド)

指定の要素の子要素の先頭に追加するサンプルです。
ボタンを押すとappendメソッドでdiv要素の子要素(pタグ)「あいうえお」の後に文言を追加します。

あいうえお

コード

上記サンプルのコードです。

<style>
#div4{border: 1px solid #000;}
</style>

<div id="div4">
	<p id = "p4">あいうえお</p>
</div>
<input type="button" id="button7" value="ボタン4">
<input type="button" id="button8" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button7").click(function() {
		$("#div4").append('<p id = "a4">append</p>');
		$("#button7").prop("disabled", true);
	});

	$("#button8").click(function() {
		$("#a4").remove();
		$("#button7").prop("disabled", false);
	});
});
</script>

16行目は、appendメソッドで5行目のdiv要素の子要素の最後にP要素を追加します。
以下は、追加したときのイメージ図です。

21行目は、removeメソッドで追加した要素を削除しています。

appendメソッド

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

関連の記事

jQuery 要素を置き換える(replaceWith/replaceAll)
jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)
jQuery 要素を削除するremoveとemptyの違い

△上に戻る