Search

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

  1. append(content)〔マッチした各要素の末尾に指定したコンテンツを挿入〕
  2. appendTo(selector)〔指定した要素の末尾にマッチした要素をすべて挿入〕
  3. prepend(content)〔マッチした各要素の先頭に指定したコンテンツを挿入〕
  4. 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">&copy; 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">追加&nbsp;&raquo;</a></p>
                </div>
                <div class="cright">
                    <select multiple id="sel2"></select>
                    <p><a href="#" id="btn_remove">&laquo;&nbsp;削除</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>&lt;strong style='color:red;'&gt;こんにちは！&lt;/strong&gt;</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">&copy; 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>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop