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>