js STUDIO

.append()

各要素内の一番後ろに指定したHTMLやエレメントを挿入します。

.append( content [, content] ) 1.0追加

戻り値:jQuery

引数 説明
content HTML文字列, DOM要素, jQueryオブジェクトを指定して、マッチした各要素内の一番後ろに挿入します。
[content] 更に挿入したいHTML文字列, DOM要素, jQueryオブジェクトを、またはそれらの配列を指定します。

.append( function(index) ) 1.4追加

戻り値:jQuery

引数 説明
function(index) マッチした各要素内の一番後ろに挿入したいHTML文字列, DOM要素, jQueryオブジェクトを返す関数を 指定します。 関数が受け取る引数indexは、マッチした要素の番号を示します。

補足事項

.append()と.appendTo()は同じ働きをします。 大きな違いは「挿入される場所」と「挿入されるコンテンツ」の文法上の位置です。

element.append(target)
elementに「挿入される場所」、targetに「挿入するコンテンツ」
element.appendTo(target)
elementに「挿入するコンテンツ」、targetに「挿入される場所」

サンプル

次のようなコードがあった場合、

<div class="container">
  <h2>ようこそ</h2>
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

マッチする各要素内の一番後ろにP要素を追加します。

$('.inner').append('<p>テスト</p>');

innerクラスを持つDIV要素は下記のように変更されます。

<div class="container">
  <h2>ようこそ</h2>
  <div class="inner">
    こんにちは
    <p>テスト</p>
  </div>
  <div class="inner">
    さようなら
    <p>テスト</p>
  </div>
</div>

また、ページ内のDOM要素を選択、挿入することも可能です。

$('.container').append($('h2'));

このコードが実行されると、クローンは作成されずマッチした要素の移動が行われます。

<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
  <h2>ようそこ</h2>
</div>

ただし、マッチした要素が複数ある場合は2つ目以降の挿入される要素はクローンのコピーが作成されます。

デモ

全てのP要素内の一番後ろに指定したHTMLを挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素: </p>
<script>
  $("p").append("<strong>挿入された要素です。</strong>");
</script>
</body>
</html>

全てのP要素内の一番後ろに生成したDOM要素を挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素: </p>
<script>
  $("p").append(document.createTextNode("挿入されたテキストです。"));
</script>
</body>
</html>

全てのP要素内の一番後ろに、もともと配置されていたStrong要素をjQueryで取得して挿入します。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<strong>STRONG要素</strong>
<p>P要素: </p>
<script>
  $("p").append( $("strong") );
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM