ホーム > jquery > jQuery .after()

jQuery .after()

jQueryリファレンス

ページ内リンク

.after() 動作内容

.after() 構文

サンプルコード

.after() 動作内容

jQueryオブジェクトで指定した要素に対して after( ) の引数で指定したコンテンツを追加します。指定できるコンテンツの内容は、文字列（テキスト）、html文章、DOM要素、jQuery要素などです。コンテンツは「 , 」（カンマ）で区切って複数指定することが可能です。引数に function も指定することが可能で、function による処理内容に合わせたコンテンツの追加も実装できます。

.after() 構文

jQueryオブジェクト.after(引数)

引数	構文	返り値	Ver
コンテンツ	.after(コンテンツ [, コンテンツ])	jQueryオブジェクト	Ver1.0
コンテンツは文字列（テキスト）、html文章、DOM要素、jQuery要素などです。
function	.after(function)	jQueryオブジェクト	Ver1.4
function による処理内容に合わせたコンテンツの追加

サンプルコード

.after()

$("div") なので、div要素の後に after() で指定したコンテンツを追加しています。

ブラウザ
jQuery
body
html

$(
	function () {
		$("button").click(function(){
			$("div").after("<strong>after コンテンツ</strong>");
			}
		)
	}
);

function () {

$("button").click(function(){

$("div").after("<strong>after コンテンツ</strong>");

}

)

}

);

<button>click here !!</button>
<div>before コンテンツ</div>

1 2	<button>click here !!</button> <div>before コンテンツ</div>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>after jQuery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
    
<!-- // =========================== jquery =========================== -->
<script type="text/javascript">
$(
	function () {
		$("button").click(function(){
			$("div").after("<strong>after コンテンツ</strong>");
			}
		)
	}
);
</script>
<!-- =========================== jquery =========================== // -->

</head>
<body>

<!-- // =========================== body ここから =========================== -->
<button>click here !!</button>
<div>before コンテンツ</div>
<!-- =========================== body ここまで =========================== // -->

</body>
</html>