オブジェクトの操作その５（HTML 要素のラッピング、置き換え、削除）

次は要素のラッピング、置き換え、削除について。
こいつらも使いそうだなぁ〜。

該当する関数は、



■ラッピング

　・囲まれる要素.wrap(囲む要素)

　・囲まれる要素.wrapAll(囲む要素)

　・囲まれる要素の親要素.wrapInner(囲む要素)

■置き換え

　・置換される要素.replaceWith(置換する要素)

■削除

　・削除される要素.remove()

の５種。
wrap*系は動きを見れば分かると思う。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        alert(".divH1の要素を各々 h1 要素で囲むぜ。");
        $(".divH1").wrap("<h1 style='color: red;'/>");

      　alert(".divH2の要素をまとめて h2 要素で囲むぜ。");
        $(".divH2").wrapAll("<h2 style='color: blue;' />");

        alert("#div1の内部要素#span1をstrongで囲むぜ。");
        $("#div1 #span1").wrapInner("<span style='color: green;'/>");

        alert("#div2を、ボタンに置き換えちゃう。");
        $("#div2").replaceWith("<input type='button' value='ぼたんですよ'/>");

        alert("#div3を削除しちゃう。");
        $("#div3").remove();

      })
    </script>
    <style>
      div {
        border: solid 1px gray;
      }
    </style>
  </head>
  <body>
    <div id="div1" class="divH1">#div1 .divH1 <span id="span1">ぱんぱかぱんつ</span>でぱんぱかぱん</div>
    <div id="div2" class="divH2">#div2 .divH2 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div3" class="divH1">#div3 .divH1 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div4" class="divH2">#div4 .divH2 ぱんぱかぱんつでぱんぱかぱん</div>
  </body>
</html>