jQuery - 指定した要素の前、または後ろへの要素の追加
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
指定した要素の前、または後ろに、要素を追加します。
要素を追加するには、それぞれ２種類の方法があります。
追加としての機能は同じですが、メソッドを実行する際の要素や、引数が異なります。
また、戻り値がメソッドの呼び出し元の要素となるため、メソッドチェーンを使った時の動作が異なります。
要素を追加するには、それぞれ２種類の方法があります。
追加としての機能は同じですが、メソッドを実行する際の要素や、引数が異なります。
また、戻り値がメソッドの呼び出し元の要素となるため、メソッドチェーンを使った時の動作が異なります。
$(要素).before( 前に追加する要素)
$(要素).after (後ろに追加する要素)
$( 前に追加する要素').insertBefore(要素)
$(後ろに追加する要素').insertAfter (要素)
2.1 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
$("#a2").before('<div>前</div>' ).css("color", "red");
$("#a2").after ('<div>後ろ</div>').css("color", "skyblue");
});
</script>
</body></html>
実行結果：画面
2.2 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
$('<div>前</div>' ).insertBefore($("#a2")).css("color", "red");
$('<div>後ろ</div>').insertAfter ($("#a2")).css("color", "skyblue");
});
</script>
</body></html>
実行結果：画面
