[jQuery] after - DOM Insertion, Outside

<script>
$(function(){
  $('#btn0').click(function(){
    $('#txt0').after('<span>こんばんわ</span>');
  });
});
</script>

<body>
<p id="txt0">こんにちわ</p>
<body>

.after( html:string )
要素(タグ)の後ろに指定htmlを追加する。

こんにちわ

要素を追加する

<script>
$(function(){
  $('#btn1').click(function(){
    $('#txt1').after( $('#copy1') );
  });
});
</script>

<body>
<div id="sample1">
<p id="txt1">こんにちわ</p>
<span>こんばんわ</span>
</div>
<body>

.after( selector )
要素(タグ)の後ろに指定selectorを追加する。

こんばんわ

こんにちわ

要素を追加する

<script>
$(function(){
  $('#btn2').click(function(){
    $('#txt2').after( function(index,html){
      $(this).empty();
      return html + ' : ' + html;
    } );
  });
});
</script>

<div id="sample2">
<p id="txt2">こんにちわ</p>
</div>

.after( function(index:int, html:string){} )
要素(タグ)の後ろにfunctionの返り値を追加する。

こんにちわ

要素を追加する

<script>
$(function(){
  $('#btn3').click(function(){
    $('#sample4 p').after( $('#txt3'), [$('#txt4'),$('#txt5')] );
  });
});
</script>

<div id="sample3">
<p id="txt3">こんにちわ</p>
<p id="txt4">こんばんわ</p>
<p id="txt5">おはよう</p>
</div>
<div id="sample4">
<p id="txt6">おやすみ</p>
</div>

.after( selector, [selector,selector...] )
要素(タグ)の後ろに指定selectorを追加する。

こんにちわ

こんばんわ

おはよう

おやすみ

要素を追加する