jQuery APIリファレンスDOM制御・更新処理:内部にコンテンツを挿入
- append(content)〔マッチした各要素の末尾に指定したコンテンツを挿入〕
- appendTo(selector)〔指定した要素の末尾にマッチした要素をすべて挿入〕
- prepend(content)〔マッチした各要素の先頭に指定したコンテンツを挿入〕
- prependTo(selector)〔指定した要素の先頭にマッチした要素をすべて挿入〕
append(content)
マッチした各要素の末尾に指定したコンテンツを挿入
2009/2/27
append(content) 戻り値:jQuery
マッチした各要素の末尾に指定したコンテンツを挿入します。
この操作は、指定した要素すべてにappendChildを行うのと同じで、ドキュメントの中にそれらの要素が追加されます。
第1引数contentには、挿入するコンテンツ(文字列、要素、jQuery)を指定します。
$(A).appendTo(B);
はBにAを挿入しますが、$(A).append(B);
はAにBを挿入します。

append()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 例1 */ $(".btn_create_link").click(function(){ $("#sample").append('<li><a href="#">新しいリンク</a></li>'); }); /* 例2 */ $("#photos a").append("<div>"+$("#photos a").attr("title")+"</div>"); /* 例3 */ $("#sample2 li").append("、<strong>こんにちは!</strong>"); }); </script> <style type="text/css"> strong { color:red; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</h1> <!-- CODE --> <p>例1:「+リンク作成」ボタンをクリックすると、新しいリンクを生成します</p> <p><button class="btn_create_link">+リンク作成</button></p> <ul id="sample"></ul> <br> <p>例2:画像のキャプションを表示します。</p> <div id="photos"> <a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></a> </div> <br> <p>例3:ID名が「sample2」のul要素内にあるli要素すべてにHTMLを挿入します。</p> <ul id="sample2"> <li>青木さん</li> <li>田中さん</li> <li>佐藤さん</li> </ul> <!-- CODE / --> </div> </body> </html>
例:オーバーレイ表示 → 解除

append()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var width="100%"; var height="100%"; var o=$("body"); $("#btn_overlay").click(function(){ /* body要素の末尾にコンテンツ挿入 */ o.append("<div id='overlay'></div>"); o.append("<button id='btn_close'>オーバーレイ解除</button>"); /* 表示領域のサイズを取得 */ if($.browser.opera){ // Opera (document.documentElement.clientHeightがあるので先に処理) width=document.body.clientWidth; height=document.body.clientHeight; }else if(typeof document.documentElement.clientWidth=='number'){ // Firefox, IE, Safari 3 width=document.documentElement.clientWidth; height=document.documentElement.clientHeight; }else if(typeof window.innerWidth=='number'){ // Safari 2 width=window.innerWidth; height=window.innerHeight; } height=o.attr("scrollHeight"); $("#overlay").css({ "opacity":"0.5", "width":width, "height":height }); /* 解除ボタンをクリックしたら、オーバーレイを削除 */ $("#btn_close").click(function(){ $("#overlay").remove(); $("#btn_close").remove(); }); }); }); </script> <style type="text/css"> #overlay { display:block; overflow:hidden; position:absolute; left:0; top:0; background:#000; } #btn_close { position:absolute; left:45%; top:300px;; color:#000; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</h1> <h2>画面に半透明オーバーレイ表示・非表示</h2> <!-- CODE --> <p><button id="btn_overlay">オーバーレイ表示</button></p> <!-- CODE / --> </div> </body> </html>
appendTo(selector)
指定した要素の末尾にマッチした要素をすべて挿入
2009/2/27
appendTo(selector) 戻り値:jQuery
指定した要素の末尾にマッチした要素をすべて挿入します。
第1引数selectorには、コンテンツが挿入されるセレクタを指定します。
$(A).append(B);
はAにBを挿入しますが、$(A).appendTo(B);
はBにAを挿入します。

appendTo()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:appendTo()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* ID名が「photo」の要素にクラス名が「caption」である要素をすべて挿入 */ $(".caption").appendTo("#photo"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } #photo .caption { color:#ff6699; display:block; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:appendTo()の使用例 | jQuery</h1> <p>▼画像に複数のキャプションを挿入します。</p> <!-- CODE --> <span class="caption">くまさんケーキ</span> <span class="caption">© PHP & JavaScript Room</span> <div id="photo"> <p><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> </div> <!-- CODE / --> </div> </body> </html>
例:複数選択型プルダウンメニューの項目の追加と削除
選択した項目(option要素)を2つのselect要素間で移動(追加・削除)します。

appendTo()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:appendTo()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn_add").click(function(){ $("#sel1 option:selected").remove().appendTo("#sel2"); }); $("#btn_remove").click(function(){ $("#sel2 option:selected").remove().appendTo("#sel1"); }); }); </script> <style type="text/css"> .demo { width:24em; } .demo p { margin:1em 0; text-align:center; } .cleft { width:12em; float:left; } .cright { width:12em; float:right; } select { width:10em; height:10em; } .demo a { border:1px solid #ccc; padding:2px 10px; background-color:#fff; text-decoration:none; } .demo a:hover { background-color:yellow; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:appendTo()の使用例 | jQuery</h1> <h2>例:複数選択型プルダウンメニューの項目の追加と削除</h2> <p>▼選択した項目(option要素)を2つのselect要素間で移動(追加・削除)します。</p> <!-- CODE --> <div class="demo cf"> <div class="cleft"> <select multiple id="sel1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <p><a href="#" id="btn_add">追加 »</a></p> </div> <div class="cright"> <select multiple id="sel2"></select> <p><a href="#" id="btn_remove">« 削除</a></p> </div> </div> <!-- CODE / --> </div> </body> </html>
prepend(content)
マッチした各要素の先頭に指定したコンテンツを挿入
2009/2/27
prepend(content) 戻り値:jQuery
マッチした各要素の先頭にコンテンツを挿入します。
第1引数contentには、先頭に挿入するコンテンツ(文字列、要素、jQuery)を指定します。
$(A).prependTo(B);
はBにAを挿入しますが、$(A).prepend(B);
はAにBを挿入します。

prepend()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:prepend()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* li要素の先頭にHTMLを挿入 */ $("li").prepend("<strong style='color:red;'>こんにちは!</strong>"); }); </script> <style type="text/css"> </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:prepend()の使用例 | jQuery</h1> <p>▼li要素の先頭にHTML(<code><strong style='color:red;'>こんにちは!</strong></code>)を挿入します。</p> <!-- CODE --> <ul> <li>田中さん</li> <li>鈴木さん</li> <li>山田さん</li> </ul> <!-- CODE / --> </div> </body> </html>
prependTo(selector)
指定した要素の先頭にマッチした要素をすべて挿入
2009/2/27
prependTo(selector) 戻り値:jQuery
指定した要素の先頭にマッチした要素をすべて挿入します。
第1引数selectorには、先頭にコンテンツが挿入されるセレクタを指定します。
$(A).prepend(B);
はAにBを挿入しますが、$(A).prependTo(B);
はBにAを挿入します。

prependTo()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM制御・更新処理:内部にコンテンツを挿入:prependTo()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* ID名が「photo」の要素の先頭にクラス名が「caption」である要素をすべて挿入 */ $(".caption").prependTo("#photo"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } #photo p { margin:10px 0 0 0; padding:0; } #photo .caption { color:#ff6699; display:block; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内部にコンテンツを挿入:prependTo()の使用例 | jQuery</h1> <p>▼画像の先頭に複数のキャプションを挿入します。</p> <!-- CODE --> <span class="caption">くまさんケーキ</span> <span class="caption">© PHP & JavaScript Room</span> <div id="photo"> <p><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> </div> <!-- CODE / --> </div> </body> </html>