.appendTo( target )
引数
- target
- selector|element|HTML string|jQuery object
戻り値
- object
- jQuery オブジェクト。
targetの末尾に選択した要素を追加する。
サンプル
li要素に[プログラム言語]を追加する。highlightボタンを押すとliを太字にして[プログラム言語]を赤文字にする。
Javascript
/*
* ドキュメントロード完了時の処理
*
* CSSの設定とappendTo()を利用して
* テキストを移動
*
*/
$('.jqTest .erea').css({
padding: 10,
border : '1px solid #555555'
});
var result = $('.jqTest p').appendTo('.jqTest .erea');
/*
* ボタンクリック時の処理
*
* 新しい要素を作成してDOMツリーに追加
* さらに上で移動したテキストも追加
*
*/
$('.jqTest :button').on('click', function(e){
// 新要素作成
var new_elem = $('<div>', { css: { border : '5px solid red',
padding : 10,
background: '#E5E5E5'},
html: '<h5>new element</h5>' });
// DOMツリーに追加
new_elem.appendTo('.jqTest').append(result);
// ボタンを無効
$(e.target).prop('disabled', 'ture');
});
HTML
<div class="jqTest">
<p>Append Text</p>
<div class="erea"></div>
<button class="btn btn-execute">execute</button>
</div>
返ってくるjQueryオブジェクトは対象としたjQuery オブジェクト。この場合は$('.jqTest li')
.append( function(index, html) )