HOME > > > > >

.after()

.after( content [, content] )

引数

(html|DOM element|jQuery object)content

戻り値

jQuery
jQueryオブジェクト

contentをjQueryオブジェクトが保持しているDOM要素の後ろに追加する。contentは複数指定可能。

サンプル

実行結果

javascript
PHP
ActionScript
  • ZYXテキスト

Javascript

  1. $('.jqTest1 h5')
  2. .after('<p>Lang</p>', $('<h6>', { text: 'h6テスト'}), document.getElementById('ZYX'))
  3. .css('color', 'red');

HTML

  1. <div class="jqTest1">
  2.     <h5>javascript</h5>
  3.     <h5>PHP</h5>
  4.     <h5>ActionScript</h5>
  5.  
  6.     <div id="ZYX">
  7.         <ul>
  8.         <li>ZYXテキスト</li>
  9.         </ul>
  10.     </div>
  11. </div>

もとのjQueryオブジェクトが返ってくる。

.after( function(index) )

引数

(function)function
indexはjQueryオブジェク内でのindex

戻り値

jQuery
jQueryオブジェクト

関数が返すHTML、DOM element(s)、jQueryオブジェクトをjQueryオブジェクトが保持しているDOM要素の後ろに追加する。

サンプル

実行結果

javascript
PHP
ActionScript

Javascript

  1. var db = ['サーバーサイドにも進出中', 'サーバーサイド', 'FlashPlayarで動く']
  2.  
  3. $('.jqTest2 h5').after(function(index){
  4.     return $('<p>', { text: index + ' : ' + db[index] }).css('color', 'red');
  5. });

HTML

  1. <div class="jqTest2">
  2.     <h5>javascript</h5>
  3.     <h5>PHP</h5>
  4.     <h5>ActionScript</h5>
  5. </div>