ywork2020.com

Title

要素内の末尾にノードを追加する

目次 (INDEX)

appendとは

ここで説明するappend とは次の語句からなるjQueryのメソッドです。
append
読み: アペンド
意味: 追加、追加する

目次に戻る

appendメソッドの概要

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

目次に戻る

構文

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

$(Selector).append(content [, content ]);
$(Selector).append(function);

目次に戻る

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

ここでは、元からある段落要素(id="idP")のコンテンツ内の末尾に新しいspan要素を追加します。

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

サンプルコード: CSS 
<style>
	#idP{
		background-color: ##lightblue;
		padding: 5px;
	}
	#idP span{
		background-color: ##lightpink;
		padding: 0 5px 0 5px;
	}
</style>
  • 03: background-color (背景色をライトブルーに設定しています。)
  • 07: background-color (背景色をライトピンクに設定しています。)
サンプルコード: 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").append("<span>追加した要素</span>");
		$("#idButton").prop("disabled", "true");
	});
</script>
  • 02-05: function() (関数です。idButtonをクリックすると実行されます。)
  • 03: append() (引数に指定したノードをセレクターに指定した要素内の末尾に追加します。)
  • 04: prop() (引数に指定した属性に値を設定します。ここではボタンを無効に設定しています。)
実行結果:

元からある段落要素

実行:

目次に戻る