HOME > > > > >

.appendTo()

.appendTo( target )

引数

target
selector|element|HTML string|jQuery object

戻り値

object
jQuery オブジェクト。

targetの末尾に選択した要素を追加する。

サンプル

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

実行結果

Append Text

Javascript

  1. /*
  2.  * ドキュメントロード完了時の処理
  3.  *
  4.  * CSSの設定とappendTo()を利用して
  5.  * テキストを移動
  6.  *
  7.  */
  8.  
  9. $('.jqTest .erea').css({
  10.     padding: 10,
  11.     border : '1px solid #555555'
  12. });
  13.  
  14. var result = $('.jqTest p').appendTo('.jqTest .erea');
  15.  
  16. /*
  17.  * ボタンクリック時の処理
  18.  *
  19.  * 新しい要素を作成してDOMツリーに追加
  20.  * さらに上で移動したテキストも追加
  21.  *
  22.  */
  23. $('.jqTest :button').on('click', function(e){
  24.  
  25.     // 新要素作成
  26.     var new_elem = $('<div>', { css: { border    : '5px solid red',
  27.                                        padding   : 10,
  28.                                        background: '#E5E5E5'},
  29.                                 html: '<h5>new element</h5>' });
  30.  
  31.   // DOMツリーに追加
  32.     new_elem.appendTo('.jqTest').append(result);
  33.  
  34.   // ボタンを無効
  35.     $(e.target).prop('disabled', 'ture');
  36. });
  37.  

HTML

  1. <div class="jqTest">
  2.     <p>Append Text</p>
  3.  
  4.     <div class="erea"></div>
  5.  
  6.     <button class="btn btn-execute">execute</button>
  7. </div>
  8.  
  9.  
  10.  

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

.append( function(index, html) )

戻り値

Integer
数値