ywork2020.com

Title

コンテンツをターゲット内の末尾に追加する

目次 (INDEX)

appendToとは

ここで説明する appendTo とは次の語句からなるjQueryのメソッドです。
append
読み: アペンド
意味: 追加、追加する
to
読み: トゥ
意味: ~に対して

目次に戻る

appendToメソッドの概要

このメソッドは、呼び出し元のコンテンツをメソッドの引数で指定した要素内の末尾に追加します。

これは append() によく似ていますが、 記述方法が異なります。 append() は引数にコンテンツを指定するので逆の記述だと解釈して構いません。

append() との機能的な違いは append() は引数に関数を用いることができますが、 このメソッドでは挿入先のターゲットを指定するため、それは出来ません。 またテキストノードのみ (文字だけ) の追加は行えません。

目次に戻る

構文

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

targetには下記のタイプを指定できます。

  • Selector: セレクター
  • htmlString: 要素文字
  • Element: 要素オブジェクト
  • Array: 配列
  • jQuery: jQオブジェクト
$(content).appendTo(target);

目次に戻る

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

ここでは、DOMString をコンテンツとして、この文字列からメソッドを呼び出し、 引数で指定するターゲット内の末尾にコンテンツを挿入します。

具体的にいうと、<span>Element SPAN</span> という文字列からメソッドを呼び出し、 div要素のコンテンツ内の末尾に追加するというものです。

サンプルコード: CSS
<style>
	b, div, span{
		display: block;
		border: thin solid ##black;
		margin: 1em 0;
		padding: 0 1em;
	}
	b{
		background-color: ##lightblue;
	}
	div{
		background-color: ##lightgray;
	}
	span{
		background-color: ##lightpink;
	}
</style>

要素の視認性を良くするため、 b , div , span の要素のベースを同じものに統一しています。 また、各要素の背景色を別の色で設定しています。

サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>
		Element DIV
		<b>Element B</b>
	</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06-09: div (ここでは、この要素がターゲットになります。)
  • 08: b (divのコンテンツ内に配置されたb要素です。)
  • 10: button (ボタンです。クリックすると script 02 ~ 05 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("<span>Element SPAN</span>").appendTo("div");
		$(this).attr("disabled", true);
	});
</script>
  • 02-05: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("<span>Element SPAN</span>") (これが、メソッドの呼び出し元になります。)
  • 03: .appendTo("div") (これが、div をターゲットにしているところです。)
  • 04: $(this).attr("disabled", true) (ボタンを無効に設定しています。ここでは this は #idButton のことです。)
実行結果:
Element DIV Element B

目次に戻る