.append()【要素内 末尾挿入 (コンテンツ指定)】

メモ

構文

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

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

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

関連

例

<style>
.border { border:1px black solid; padding:5px 5px; line-height:225%; }
.border2 { border:2px red dashed; padding:1px 5px; }
.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").append( "<span class='color1 border2'>(htmlString)</span>" );
var elm = document.createElement( "span" );
$(elm).text("(Element)").addClass("border2");
$("#id2").append( elm );
var text = document.createTextNode( "(Text)" );
$("#id3").append( text ).append( "(String)" );
$("#id3")
  .append( "<span class='border2'>(HTML-1)</span>", "<span class='border2'>(HTML-2)</span>" )
  .append( "<span class='border2'>(HTML-X)</span>", "<span class='border2'>(HTML-Y)</span>" );
$("#id4").append( ["<span class='border2'>(Array-1)</span>", "<span class='border2'>(Array-2)</span>"] );
$(".class1").append( $("#id0") );
$(".class2").append( 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