js STUDIO

.prepend()

各要素内の一番前に指定したHTMLやエレメントを挿入します。

.prepend( content [, content] ) 1.0追加

戻り値:jQuery

引数 説明
content HTML文字列, DOM要素, jQueryオブジェクトを指定して、マッチした各要素内の一番前に挿入します。
[content] 更に挿入したいHTML文字列, DOM要素, jQueryオブジェクトを、またはそれらの配列を指定します。

.prepend( function(index) ) 1.4追加

戻り値:jQuery

引数 説明
function(index) マッチした各要素内の一番前に挿入したいHTML文字列, DOM要素, jQueryオブジェクトを返す関数を 指定します。 関数が受け取る引数indexは、マッチした要素の番号を示します。

補足事項

.prepend()と.prependTo()は同じ働きをします。 大きな違いは「挿入される場所」と「挿入されるコンテンツ」の文法上の位置です。

element.prepend(target)
elementに「挿入される場所」、targetに「挿入するコンテンツ」
element.prependTo(target)
elementに「挿入するコンテンツ」、targetに「挿入される場所」

サンプル

次のようなコードがあった場合、

<h2>ようこそ</h2>
<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

マッチする各要素内の一番前にP要素を追加します。

$('.inner').prepend('<p>テスト</p>');

innerクラスを持つDIV要素は下記のように変更されます。

<h2>ようこそ</h2>
<div class="container">
  <div class="inner">
    <p>テスト</p>
    こんにちは
  </div>
  <div class="inner">
    <p>テスト</p>
    さようなら
  </div>
</div>

また、ページ内のDOM要素を選択、挿入することも可能です。

$('.container').prepend($('h2'));

このコードが実行されると、クローンは作成されずマッチした要素の移動が行われます。

<div class="container">
  <h2>ようそこ</h2>
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

ただし、マッチした要素が複数ある場合は2つ目以降の挿入される要素はクローンのコピーが作成されます。

デモ

全てのP要素内の一番前に指定したHTMLを挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素(1) </p>
<p>P要素(2) </p>
<script>
  $("p").prepend("<b>挿入された要素です。</b>");
</script>
</body>
</html>

全てのP要素内の一番前に生成したDOM要素を挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素(1) </p>
<p>P要素(2) </p>
<script>
  $("p").prepend(document.createTextNode("挿入されたテキストです。"));
</script>
</body>
</html>

全てのP要素内の一番前に、もともと配置されていたB要素をjQueryで取得して挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素: </p>
<b>B要素</b>
<script>
  $("p").prepend( $("b") );
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM