.after()【要素後 挿入 (コンテンツ指定)】

メモ

構文

説明構文戻り値
要素後 挿入 (コンテンツ指定) .after( content1 [, … ,contentN ] ) 1.0

htmlString  | Element  | Text  | Array  | jQuery   content1 ～ contentN：挿入コンテンツ
jQuery
.after( function ) 1.4

function ( [ index ] )
引数説明
Integer indexインデックス (0～)
(this)処理中DOM要素
戻り値説明
htmlString
Element
Text
jQuery 		挿入コンテンツ
jQuery
.after( function-html ) 1.10

function-html ( [ index [, html ] ] )
引数説明
Integer indexインデックス (0～)
String html元のHTML値
(this)処理中DOM要素
戻り値説明
htmlString
Element
Text
jQuery 		挿入コンテンツ
jQuery

関連

例

<style>
.border { border:1px black solid; padding:1px 5px; }
.border2 { border:2px red dashed; padding:3px 5px; line-height:225%; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>

<span id="id0" class="bold border2">(jQuery [id0])</span>

<p><span id="id1" class="border">[id1]</span></p>
<p><span id="id2" class="border">[id2]</span></p>
<p><span id="id3" class="border">[id3]</span></p>
<p><span id="id4" class="border">[id4]</span></p>
<p><span class="class1 border">[class1]-1</span></p>
<p><span class="class1 border">[class1]-2</span></p>
<p><span class="class1 border">[class1]-3</span></p>
<p><span class="class2 border">[class2]-1</span></p>
<p><span class="class2 border">[class2]-2</span></p>
<p><span class="class2 border">[class2]-3</span></p>

<script>
$("#id1").after( "<span class='color1 border2'>(HtmlString)</span>" );

var elm = document.createElement( "span" );
$(elm).text("(Element)").addClass("border2");
$("#id2").after( elm );

var text = document.createTextNode( "(Text)" );
$("#id3").after( text ).after( "(String)" );
$("#id3")
  .after( "<span class='border2'>(HTML-1)</span>", "<span class='border2'>(HTML-2)</span>" )
  .after( "<span class='border2'>(HTML-X)</span>", "<span class='border2'>(HTML-Y)</span>" );

$("#id4").after( ["<span class='border2'>(Array-1)</span>", "<span class='border2'>(Array-2)</span>"] );

$(".class1").after( $("#id0") );

$(".class2").after( function(index, html) {
  var text = "<span class='border2'>(function [" + index + "]：" + html + ")</span>";
  return text;
});
</script>
(jQuery [id0])

[id1]

[id2]

[id3]

[id4]

[class1]-1

[class1]-2

[class1]-3

[class2]-1

[class2]-2

[class2]-3