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に「挿入される場所」

サンプル

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

  1. <div class="container">
  2.   <h2>ようこそ</h2>
  3.   <div class="inner">こんにちは</div>
  4.   <div class="inner">さようなら</div>
  5. </div>

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

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

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

  1. <div class="container">
  2.   <h2>ようこそ</h2>
  3.   <div class="inner">
  4.     こんにちは
  5.     <p>テスト</p>
  6.   </div>
  7.   <div class="inner">
  8.     さようなら
  9.     <p>テスト</p>
  10.   </div>
  11. </div>

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

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

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

  1. <div class="container">
  2.   <div class="inner">こんにちは</div>
  3.   <div class="inner">さようなら</div>
  4.   <h2>ようそこ</h2>
  5. </div>

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

デモ

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.   p { background:yellow; }
  6. </style>
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>
  8. </head>
  9. <body>
  10. <p>P要素: </p>
  11. <script>
  12.   $("p").append("<strong>挿入された要素です。</strong>");
  13. </script>
  14. </body>
  15. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.   p { background:yellow; }
  6. </style>
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>
  8. </head>
  9. <body>
  10. <p>P要素: </p>
  11. <script>
  12.   $("p").append(document.createTextNode("挿入されたテキストです。"));
  13. </script>
  14. </body>
  15. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.   p { background:yellow; }
  6. </style>
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>
  8. </head>
  9. <body>
  10. <strong>STRONG要素</strong>
  11. <p>P要素: </p>
  12. <script>
  13.   $("p").append( $("strong") );
  14. </script>
  15. </body>
  16. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM