【jQuery】要素の一番前と一番後ろに要素を追加する方法

今回は特定の要素の子要素の一番前と一番後ろに要素を追加する方法を紹介していきたいと思います。

要素の一番前と一番後ろに要素を追加する方法

html

<div class="box">
	<div>アイテム1</div>
	<div>アイテム2</div>
	<div>アイテム3</div>
</div>

<div class="box1">
	<div>アイテム1</div>
	<div>アイテム2</div>
	<div>アイテム3</div>
</div>

方法1

方法1は疑似要素の「last」と「first」と「after」、 「before」を使って特定の要素の子要素の一番前と一番後ろに要素を追加します。

jQuery

jQuery(function () {
	jQuery('.box div:last').after('<p>テキスト挿入（一番後ろ）</p>');
	jQuery('.box div:first').before('<p>テキスト挿入（一番前）</p>');
});

方法2

方法2は親要素を指定して「 append 」と「 prepend 」を使って子要素の一番前と一番後ろに要素を追加します。

jQuery

jQuery(function () {
	jQuery('.box1').append('<p>テキスト挿入（一番後ろ）</p>');
	jQuery('.box1').prepend('<p>テキスト挿入（一番前）</p>');
});

サンプル