jQuery APIリファレンスDOM制御・更新処理:外部にコンテンツを挿入
- after()〔マッチした各要素の後ろにコンテンツを挿入〕
- before()〔マッチした各要素の前にコンテンツを挿入〕
- insertAfter()〔指定したコンテンツをすべてのマッチした要素の後ろに挿入〕
- insertBefore()〔指定したコンテンツをすべてのマッチした要素の前に挿入〕
after()
マッチした各要素の後ろにコンテンツを挿入
2009/2/27
after(content) 戻り値:jQuery
マッチした各要素の後ろにコンテンツを挿入します。
第1引数contentには、挿入するコンテンツ(文字列、要素、jQuery)を指定します。

after()の使用例 サンプルを見る
<!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制御・更新処理:外部にコンテンツを挿入:after()の使用例 | 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」の要素の中にあるimg要素の末尾にコンテンツを挿入 */ $("#photo img").after("<span class='caption'>くまさんケーキ © PHP & JavaScript Room</span>"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } .caption { display:block; text-align:right; font-size:.85em; margin-top:5px; color:#fff; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:外部にコンテンツを挿入:after()の使用例 | jQuery</h1> <p>▼画像の末尾にキャプションを挿入します。</p> <!-- CODE --> <p id="photo"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> <!-- CODE / --> </div> </body> </html>
before()
マッチした各要素の前にコンテンツを挿入
2009/2/27
before(content) 戻り値:jQuery
マッチした各要素の前にコンテンツを挿入します。
第1引数contentには、挿入するコンテンツ(文字列、要素、jQuery)を指定します。

before()の使用例 サンプルを見る
<!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制御・更新処理:外部にコンテンツを挿入:before()の使用例 | 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」の要素の中にあるimg要素の先頭にコンテンツを挿入 */ $("#photo img").before("<span class='caption'>くまさんケーキ © PHP & JavaScript Room</span>"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } .caption { display:block; text-align:right; font-size:.85em; margin-bottom:5px; color:#fff; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:外部にコンテンツを挿入:before()の使用例 | jQuery</h1> <p>▼画像の先頭にキャプションを挿入します。</p> <!-- CODE --> <p id="photo"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> <!-- CODE / --> </div> </body> </html>
insertAfter()
指定したコンテンツをすべてのマッチした要素の後ろに挿入
2009/2/27
insertAfter(content) 戻り値:jQuery
指定したコンテンツをマッチした各要素の後ろに挿入します。
第1引数contentには、選択された要素の後ろに挿入するコンテンツ(文字列、要素、jQuery)を指定します。
$(A).after(B);
はAの末尾にBを挿入しますが、$(A).insertAfter(B);
はBの末尾にAを挿入します。

insertAfter()の使用例 サンプルを見る
<!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制御・更新処理:内側にコンテンツを挿入:insertAfter()の使用例 | 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」の要素の中にあるimg要素の末尾にクラス名が「caption」である要素をすべて挿入 */ $(".caption").insertAfter("#photo img"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } #photo img { margin-bottom:5px; } .caption { color:#fff; font-size:.85em; padding-right:.2em; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内側にコンテンツを挿入:insertAfter()の使用例 | jQuery</h1> <p>▼画像の末尾に複数のキャプションを挿入します。</p> <!-- CODE --> <span class="caption">© PHP & JavaScript Room</span> <span class="caption">くまさんケーキ</span> <p id="photo"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> <!-- CODE / --> </div> </body> </html>
insertBefore()
指定したコンテンツをすべてのマッチした要素の前に挿入
2009/2/27
insertBefore(content) 戻り値:jQuery
指定したコンテンツを、マッチした各要素の前に挿入します。
第1引数contentには、選択された要素の前に挿入するコンテンツ(文字列、要素、jQuery)を指定します。
$(A).before(B);
はAの先頭にBを挿入しますが、$(A).insertBefore(B);
はBの先頭にAを挿入します。

insertBefore()の使用例 サンプルを見る
<!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制御・更新処理:内側にコンテンツを挿入:insertBefore()の使用例 | 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」の要素の中にあるimg要素の先頭にクラス名が「caption」である要素をすべて挿入 */ $(".caption").insertBefore("#photo img"); }); </script> <style type="text/css"> #photo { color:#666; background-color:#000; width:240px; padding:10px; } #photo img { margin-top:5px; } .caption { color:#fff; font-size:.85em; padding-right:.2em; } </style> </head> <body> <div id="wrap"> <h1>DOM制御・更新処理:内側にコンテンツを挿入:insertBefore()の使用例 | jQuery</h1> <p>▼画像の先頭に複数のキャプションを挿入します。</p> <!-- CODE --> <span class="caption">くまさんケーキ</span> <span class="caption">© PHP & JavaScript Room</span> <p id="photo"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p> <!-- CODE / --> </div> </body> </html>