prependメソッド

メソッド prepend は、要素の先頭に テキストを追加します。同様に動作する prependTo メソッドもあります。

構文

要素の先頭へのテキスト挿入:

javascript$(セレクタ).prepend(テキスト);

選択された要素の先頭には、カスタム関数によって 返されたテキストを追加できます。この関数は、 選択された各要素に対して個別に呼び出されます。 呼び出し時には、以下のパラメータが渡されます: セット内での要素の位置、要素の現在の内容:

javascript$(セレクタ).prepend(function(セット内の番号, 要素の現在の内容));

内容は、通常のテキストだけでなく、DOM要素や jQueryオブジェクトの場合もあります。この場合、 これらの要素はHTMLコード内の元の位置から 移動されます。

例

指定された段落の先頭にテキストを挿入してみましょう:

html<p id="test">テキスト</p>
javascript$('#test').prepend('!!!');

HTMLコードは次のようになります:

html<p id="test">!!!テキスト</p>

例

指定された段落の先頭にタグ付きのテキストを挿入してみましょう:

html<p id="test">テキスト</p>
javascript$('#test').prepend('<b>!!!</b>');

HTMLコードは次のようになります:

html<p id="test"><b>!!!</b>テキスト</p>

例

すべての段落を見つけ、それぞれの先頭に セット内での順序番号を付けてみましょう:

html<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
javascript$('p').prepend(function(index, text) {
  return index;
});

HTMLコードは次のようになります:

html<p>0テキスト</p>
<p>1テキスト</p>
<p>2テキスト</p>
<p>3テキスト</p>
<p>4テキスト</p>

関連項目

  • メソッド prependTo,
    要素の先頭にテキストを追加します
  • メソッド append, before, after,
    特定の場所にコンテンツを追加できます
  • 疑似要素 before,
    CSSで要素の末尾にテキストを追加します