prependToとは
- ここで説明する prependTo とは次の語句からなるjQueryのメソッドです。
- prepend
- 読み: プリペンド
意味: 付加、付加する - to
- 読み: トゥ
意味: ～に対して
prependToメソッドの概要
このメソッドは、呼び出し元のコンテンツをメソッドの引数で指定した要素内の先頭に追加します。
これは prepend() によく似ていますが、 記述方法が異なります。 prepend() は引数にコンテンツを指定するので逆の記述だと解釈して構いません。
prepend() との機能的な違いは prepend() は引数に関数を用いることができますが、 このメソッドでは挿入先のターゲットを指定するため、それは出来ません。 またテキストノードのみ (文字だけ) の追加は行えません。
構文
サンプルを見る前に構文を確認しておきます。
targetには下記のタイプを指定できます。
- Selector: セレクター
- htmlString: 要素文字
- Element: 要素オブジェクト
- Array: 配列
- jQuery: jQオブジェクト
$(content).prependTo(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>").prependTo("div");
$(this).attr("disabled", true);
});
</script>
- 02-05: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03: $("<span>Element SPAN</span>") (これが、メソッドの呼び出し元になります。)
- 03: .prependTo("div") (これが、div をターゲットにしているところです。)
- 04: $(this).attr("disabled", true) (ボタンを無効に設定しています。ここでは this は #idButton のことです。)
Element DIV
Element B