.prepend( content [, content] )
引数
- content
- htmlString | Element | Array | jQuery
戻り値
- object
- jQuery オブジェクト。
jQueryオブジェクトが保持しているDOM要素の前に、contentを挿入する。
サンプル
li要素に[プログラム言語]を追加する。highlightボタンを押すとliを太字にして[プログラム言語]を赤文字にする。
実行結果
- C#
- PHP
- Javascript
- Perl
- Ruby
- Java
Javascript
// [プログラム言語]を追加
var result1 = $('.jq-sample1 li').prepend('<span>[プログラム言語]</span>');
// 追加した結果にテキスト装飾
$('.jq-sample1 :button').on('click', function(){
result1.css('fontWeight', 'bold').find('span').css('color', 'red');
});
HTML
<div class="jq-sample1">
<ul>
<li>C#</li>
<li>PHP</li>
<li>Javascript</li>
<li>Perl</li>
<li>Ruby</li>
<li>Java</li>
</ul>
<button class="cq-btn m-primary">highlight</button>
</div>
返ってくるjQueryオブジェクトは追加した要素を含むDOMを持った jQuery オブジェクト
.prepend( function(index, html) )
戻り値
- object
- jQuery オブジェクト。
サンプル
li要素に[プログラム言語]を追加する。highlightボタンを押すとliを太字にして[プログラム言語]を赤文字にする。
実行結果
- C#
- PHP
- Javascript
- Perl
- Ruby
- Java
index / html
Javascript
// [プログラム言語]を追加
// index と html を出力
var str = '';
var result2 = $('.jq-sample2 li').prepend(function(index, html){
str += 'index: ' + index + ' / html: ' + html + '<br />';
return '<span>[プログラム言語]</span>';
});
$('.jq-sample2 .display').html(str);
// 追加した結果にテキスト装飾
$('.jq-sample2 :button').on('click', function(){
result2.css('fontWeight', 'bold').find('span').css('color', 'red');
});
HTML
<div class="jq-sample2">
<button class="cq-btn m-primary">highlight</button>
<ul>
<li>C#</li>
<li>PHP</li>
<li>Javascript</li>
<li>Perl</li>
<li>Ruby</li>
<li>Java</li>
</ul>
<h5 class="headline-output">index / html</h5>
<div class="display"></div>
</div>