オブジェクトの操作その４（HTML 要素の移動）

jQuery オブジェクトの操作

前回は新しく要素を挿入するパターン。
今度は既に存在する要素を移動するパターン。
これも簡単。

prependTo()、appendTo()、insertBefore()、insertAfter()がその関数群。
前回の関数が分かれば予想は簡単。

<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("「ターゲット」を #div1 の要素の内側先頭に移動するぜ。");
        $("#target").prependTo("#div1");
      　alert("「ターゲット」を #div2 の要素の内側末尾に移動するぜ。");
        $("#target").appendTo("#div2");
      　alert("「ターゲット」を #div3 の要素の外側直前に移動するぜ。");
        $("#target").insertBefore("#div3");
      　alert("「ターゲット」を #div4 の要素の外側直後に移動するぜ。");
        $("#target").insertAfter("#div4");
      })
    </script>
    <style>
      div {
        border: solid 1px gray;
      }
    </style>
  </head>
  <body>
    <span id="target" style="color: red;">「ターゲット」</span>
    <div id="div1">#div1 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div2">#div2 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div3">#div3 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div4">#div4 ぱんぱかぱんつでぱんぱかぱん</div>
  </body>
</html>