ywork2020.com

Title

要素の直後にノードを追加する

目次 (INDEX)

afterとは

ここで説明するafter とは次の語句からなるjQueryのメソッドです。
after
読み: アフター
意味: 後、の後に、後ろに

目次に戻る

afterメソッドの概要

このメソッドは、セレクターで指定した要素の直後に新しいノードを追加します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

$(Selector).after("DOMstring");

目次に戻る

サンプルコードと実行結果

ここでは、元からある段落要素(id="idP")の直後に新しい段落要素を追加します。

新しい要素が追加される様子を目視するために実行には関数を使っています。 「段落を追加」ボタンをクリックすると関数が呼び出されて結果を見ることができます。

サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<p id="idP">元からある段落要素</p>
	<p>
		実行:<br>
		<input type="button" value="段落を追加" id="idButton">
	</p>
</body>
  • 05: p (識別子=idP を持つ段落要素です。この要素の直後に新しい要素が追加されます。)
  • 08: input (識別子=idButton を持つ要素です。クリックすると関数が実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$("#idP").after("<p>追加した段落要素</p>");
		$("#idButton").prop("disabled", "true");
	});
</script>
  • 02-05: function() (関数です。idButtonをクリックすると実行されます。)
  • 03: after() (引数に指定したノードをセレクターに指定した要素の直後に追加します。)
  • 04: prop() (引数に指定した属性に値を設定します。ここではボタンを無効に設定しています。)
実行結果:

元からある段落要素

実行:

目次に戻る