HOME > > > > >

.prepend()

.prepend( content [, content] )

引数

content
htmlString | Element | Array | jQuery

戻り値

object
jQuery オブジェクト。

jQueryオブジェクトが保持しているDOM要素の前に、contentを挿入する。

サンプル

li要素に[プログラム言語]を追加する。highlightボタンを押すとliを太字にして[プログラム言語]を赤文字にする。

実行結果

  • C#
  • PHP
  • Javascript
  • Perl
  • Ruby
  • Java

Javascript

  1. // [プログラム言語]を追加
  2. var result1 = $('.jq-sample1 li').prepend('<span>[プログラム言語]</span>');
  3.  
  4. // 追加した結果にテキスト装飾
  5. $('.jq-sample1 :button').on('click', function(){
  6.     result1.css('fontWeight', 'bold').find('span').css('color', 'red');
  7. });

HTML

  1.  
  2. <div class="jq-sample1">
  3.     <ul>
  4.     <li>C#</li>
  5.     <li>PHP</li>
  6.     <li>Javascript</li>
  7.     <li>Perl</li>
  8.     <li>Ruby</li>
  9.     <li>Java</li>
  10.     </ul>
  11.  
  12.     <button class="cq-btn m-primary">highlight</button>
  13. </div>
  14.  

返ってくるjQueryオブジェクトは追加した要素を含むDOMを持った jQuery オブジェクト

.prepend( function(index, html) )

戻り値

object
jQuery オブジェクト。

サンプル

li要素に[プログラム言語]を追加する。highlightボタンを押すとliを太字にして[プログラム言語]を赤文字にする。

実行結果

  • C#
  • PHP
  • Javascript
  • Perl
  • Ruby
  • Java
index / html

Javascript

  1. // [プログラム言語]を追加
  2. // index と html を出力
  3. var str = '';
  4. var result2 = $('.jq-sample2 li').prepend(function(index, html){
  5.     str += 'index: ' + index + ' / html: ' + html + '<br />';
  6.     return '<span>[プログラム言語]</span>';
  7. });
  8. $('.jq-sample2 .display').html(str);
  9.  
  10. // 追加した結果にテキスト装飾
  11. $('.jq-sample2 :button').on('click', function(){
  12.     result2.css('fontWeight', 'bold').find('span').css('color', 'red');
  13. });

HTML

  1. <div class="jq-sample2">
  2.     <button class="cq-btn m-primary">highlight</button>
  3.  
  4.     <ul>
  5.         <li>C#</li>
  6.         <li>PHP</li>
  7.         <li>Javascript</li>
  8.         <li>Perl</li>
  9.         <li>Ruby</li>
  10.         <li>Java</li>
  11.     </ul>
  12.  
  13.     <h5 class="headline-output">index / html</h5>
  14.  
  15.     <div class="display"></div>
  16. </div>