DOM制御･更新処理：外部にコンテンツを挿入｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room

jQuery APIリファレンスDOM制御･更新処理：外部にコンテンツを挿入


  1. after()〔マッチした各要素の後ろにコンテンツを挿入〕
  2. before()〔マッチした各要素の前にコンテンツを挿入〕
  3. insertAfter()〔指定したコンテンツをすべてのマッチした要素の後ろに挿入〕
  4. 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'>くまさんケーキ &copy; 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'>くまさんケーキ &copy; 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">&copy; 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">&copy; 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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.