HOME > リファレンス > jQuery > jQuery API一覧 > Manipulation > .append()

.append()

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

.append( content [, content] )

引数

content: DOM element|HTML string|jQuery object

戻り値

object: jQuery オブジェクト。

サンプル

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

実行結果

C#
PHP
Javascript
Perl
Ruby
Java

Javascript

// [プログラム言語]を追加
var result = $('.jqTest li').append('<span>[プログラム言語]</span>');
// 追加した結果にテキスト装飾
$('.jqTest :button').on('click', function(){
result.css('fontWeight', 'bold').find('span').css('color', 'red');
});

HTML

<div class="jqTest">
<ul>
<li>C#</li>
<li>PHP</li>
<li>Javascript</li>
<li>Perl</li>
<li>Ruby</li>
<li>Java</li>
</ul>
<button class="btn btn-execute">highlight</button>
</div>

返ってくるjQueryオブジェクトは対象としたjQuery オブジェクト。この場合は$('.jqTest li')

.append( function(index, html) )

戻り値

object: jQuery オブジェクト。

参照サイト