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

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


  1. wrap(html)〔マッチした各要素を指定したHTMLコンテンツで囲む〕
  2. wrap(elem)〔マッチした各要素を指定した要素で囲む〕
  3. wrapAll(html)〔マッチした要素をひとまとめにして指定した要素やHTMLコンテンツで囲む〕
  4. wrapAll(elem)〔マッチした要素集合の中にあるすべての要素をラップ要素で囲む〕
  5. wrapInner(html)〔マッチした各要素の内部にある子コンテンツ（テキストノード含む）をHTML構造で囲む〕
  6. wrapInner(elem)〔マッチした各要素の内部にある子コンテンツ（テキストノード含む）をDOM要素で囲む〕

wrap(html)
マッチした各要素を指定したHTMLコンテンツで囲む

2009/2/27

wrap(html)　戻り値：jQuery

マッチした各要素の周囲を指定したHTMLコンテンツで囲みます。

このラップ処理は、ドキュメントの意味のある構造を壊すことなく、ドキュメントの中に追加構造を挿入するのに便利です。 最初の要素の構造内の最も深い子孫要素を見つけます。

  • 第1引数htmlには、マッチした各要素の周りを囲うHTML文字列を指定します。

wrap(html)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrap(html)の使用例 | 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(){
                /* img要素をHTMLコンテンツで囲む */
                $("img.photo").wrap("<div class='photobox'></div>");
            });
        </script>
        <style type="text/css">
            .photobox { margin:0 10px 0 0; border:1px solid #000; width:110px; height:85px; background-color:orange; float:left; }
             .photo { margin:5px; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrap(html)の使用例 | jQuery</h1>
            <p>▼img要素をHTMLコンテンツ（<code>&lt;div class='photobox'&gt;&lt;/div&gt;</code>）で囲みます。</p>
<!-- CODE -->
            <div class="cf">
                <img class="photo" src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img class="photo" src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img class="photo" src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

wrap(elem)
マッチした各要素を指定した要素で囲む

2009/2/27

wrap(elem)　戻り値：jQuery

マッチした各要素の周囲を指定した要素で囲みます。

  • 第1引数elemには、マッチした各要素の周りを囲うDOM要素を指定します。

wrap(elem)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrap(elem)の使用例 | 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(){
                /* img要素をdiv要素で囲む */
                $("#gallery img").wrap(document.createElement("div"));
            });
        </script>
        <style type="text/css">
            #gallery div { margin:0 10px 0 0; border:1px solid #000; width:110px; height:85px; background-color:orange; float:left; }
             #gallery img { margin:5px; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrap(elem)の使用例 | jQuery</h1>
            <p>▼img要素をdiv要素で囲みます。</p>
<!-- CODE -->
            <div id="gallery" class="cf">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

wrapAll(html)
マッチした要素をひとまとめにして指定した要素やHTMLコンテンツで囲む

2009/2/27

wrapAll(html)　戻り値：jQuery

マッチした要素の中にあるすべての要素の周囲をラップ要素で囲みます。

wrap(html)はマッチした要素集合の中にある各要素を囲みますが、wrapAll()はマッチした要素集合を1つの要素で囲みます。

このラップ処理は、ドキュメントの意味のある構造を壊すことなく、ドキュメントの中に追加構造を挿入するのに便利です。 最初の要素の構造内の最も深い子孫要素を見つけます。

  • 第1引数htmlには、マッチした各要素の周りを囲うHTML文字列を指定します。

wrapAll(html)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrapAll(html)の使用例 | 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名が「gallery」の要素の中にあるすべてのimg要素をひとまとめにして指定したHTMLコンテンツで囲む */
                $("#gallery img").wrapAll("<div></div>");
            });
        </script>
        <style type="text/css">
            #gallery div { border:10px solid #000; overflow:hidden;  height:100%; background:#000; }
            #gallery img { margin:0 10px 0 0; border:1px solid #fff; width:110px; height:85px; background-color:orange; float:left; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrapAll(html)の使用例 | jQuery</h1>
            <p>▼ID名が「gallery」の要素の中にあるすべてのimg要素をひとまとめにして指定したHTMLコンテンツで囲みます。</p>
<!-- CODE -->
            <div id="gallery" class="cf">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

wrapAll(elem)
マッチした要素集合の中にあるすべての要素をラップ要素で囲む

2009/2/27

wrapAll(elem)　戻り値：jQuery

マッチした要素の中にあるすべての要素の周囲をDOM要素で囲みます。

wrap(elem)はマッチした要素集合の中にある各要素を囲みますが、wrapAll()はマッチした要素集合を1つの要素で囲みます。

  • 第1引数elemには、マッチした各要素の周りを囲うDOM要素を指定します。

wrapAll(elem)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrapAll(elem)の使用例 | 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名が「gallery」の要素の中にあるすべてのimg要素をひとまとめにしてdiv要素で囲む */
                $("#gallery img").wrapAll(document.createElement("div"));
            });
        </script>
        <style type="text/css">
            #gallery div { border:10px solid #000; overflow:hidden;  height:100%; background:#000; }
            #gallery img { margin:0 10px 0 0; border:1px solid #fff; width:110px; height:85px; background-color:orange; float:left; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrapAll(elem)の使用例 | jQuery</h1>
            <p>▼ID名が「gallery」の要素の中にあるすべてのimg要素をひとまとめにしてdiv要素で囲みます。</p>
<!-- CODE -->
            <div id="gallery" class="cf">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

wrapInner(html)
マッチした各要素の内部にある子コンテンツ（テキストノード含む）をHTML構造で囲む

2009/2/27

wrapInner(html)　戻り値：jQuery

マッチした各要素の内部にある子コンテンツ（テキストノード含む）の周囲をHTML構造で囲みます。

このラップ処理は、ドキュメントの意味のある構造を壊すことなく、ドキュメントの中に追加構造を挿入するのに便利です。 最初の要素の構造内の最も深い子孫要素を見つけます。

  • 第1引数htmlには、マッチした各要素の内部にある子コンテンツの周りを囲うHTML文字列を指定します。

wrapInner(html)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrapInner(html)の使用例 | 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名が「gallery」の中にある子要素をそれぞれ指定したHTMLコンテンツで囲む */
                $("#gallery").wrapInner("<div></div>");
            });
        </script>
        <style type="text/css">
            #gallery div { border:10px solid #000; overflow:hidden;  height:100%; background:#000; }
            #gallery img { margin:0 10px 0 0; border:1px solid #fff; width:110px; height:85px; background-color:orange; float:left; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrapInner(html)の使用例 | jQuery</h1>
            <p>▼ID名が「gallery」の中にある子要素をそれぞれ指定したHTMLコンテンツで囲みます。</p>
<!-- CODE -->
            <div id="gallery" class="cf">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

wrapInner(elem)
マッチした各要素の内部にある子コンテンツ（テキストノード含む）をDOM要素で囲む

2009/2/27

wrapInner(elem)　戻り値：jQuery

マッチした各要素の内部にある子コンテンツ（テキストノード含む）の周囲をDOM要素で囲みます。

  • 第1引数elemには、マッチした各要素の内部にある子コンテンツの周りを囲うDOM要素を指定します。

wrapInner(elem)の使用例サンプルを見る
<!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制御･更新処理：周囲にコンテンツを挿入：wrapInner(elem)の使用例 | 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名が「gallery」の中にある子要素をそれぞれdiv要素で囲む */
                $("#gallery").wrapInner(document.createElement("div"));
            });
        </script>
        <style type="text/css">
            #gallery div { border:10px solid #000; overflow:hidden;  height:100%; background:#000; }
            #gallery img { margin:0 10px 0 0; border:1px solid #fff; width:110px; height:85px; background-color:orange; float:left; }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM制御･更新処理：周囲にコンテンツを挿入：wrapInner(html)の使用例 | jQuery</h1>
            <p>▼ID名が「gallery」の中にある子要素をそれぞれdiv要素で囲みます。</p>
<!-- CODE -->
            <div id="gallery" class="cf">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" alt="くまさんケーキ" />
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop