デモページはこちら

jQueryで要素を追加または移動するメソッドのまとめです。対象要素の直前に追加するbefore、insertBefore、対象要素の直後に追加するafter、insertAfter、対象要素の子要素の最初に追加するprepend、prependTo、対象要素の子要素の最後に追加するappend、appendToです。
これらのメソッドは要素の追加と移動はできますが、要素の取得と変更はできません。要素の取得か変更が必要な場合はtextメソッドかhtmlメソッドを使用します。

以下のhtmlの構造でテストします。

<p class="title">タイトルデモ</p>
<div class="text">
	<p class="text01">ダミーテキスト01</p>
	<p class="text02">ダミーテキスト02</p>
	<p class="text03">ダミーテキスト03</p>
	<p class="text04">ダミーテキスト04</p>
	<p class="text05">ダミーテキスト05</p>
</div>
<input type="button" class="btn01" value="before">
<input type="button" class="btn02" value="insertBefore">
<input type="button" class="btn03" value="after">
<input type="button" class="btn04" value="insertAfter">
<input type="button" class="btn05" value="prepend">
<input type="button" class="btn06" value="prependTo">
<input type="button" class="btn07" value="append">
<input type="button" class="btn08" value="appendTo"><br><br>
<input type="button" class="btn09" value="リロードしてリセット">

要素を追加または移動する各メソッドを利用して動作を確認します。対象要素はクラス名text03のpタグを指定します。この場合、既存要素のため移動の動作になります。新規の要素を対象要素に指定すれば追加の動作になります。

$(function() {
	var text03 = $('.text03');
	$('.btn01').on('click', function() {
		$('.text').before(text03);
	});
	$('.btn02').on('click', function() {
		$(text03).insertBefore('.text');
	});
	$('.btn03').on('click', function() {
		$('.text').after(text03);
	});
	$('.btn04').on('click', function() {
		$(text03).insertAfter('.text');
	});
	$('.btn05').on('click', function() {
		$('.text').prepend(text03);
	});
	$('.btn06').on('click', function() {
		$(text03).prependTo('.text');
	});
	$('.btn07').on('click', function() {
		$('.text').append(text03);
	});
	$('.btn08').on('click', function() {
		$(text03).appendTo('.text');
	});
	$('.btn09').on('click', function() {
		location.reload();
	});
});