オブジェクトの操作その３（HTML 要素内・外に対する挿入・追加）

jQuery オブジェクトの操作

今度は指定したセレクターの要素内、外に対する挿入、追加操作について。
これも簡単だなぁ〜。

<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() {
      　$("#div1").prepend("<span style='color: red'>要素内の前に挿入</span>");
      　$("#div2").append("<span style='color: blue'>要素内の後に追加</span>");
      　$("#div3").before("<span style='color: green'>要素の直前に挿入</span>");
      　$("#div4").after("<span style='color: gray'>要素の直後に追加</span>");
      })
    </script>
  </head>
  <body>
    <div id="div1">#div1 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div2">#div2 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div3">#div3 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div4">#div4 ぱんぱかぱんつでぱんぱかぱん</div>
  </body>
</html>

prepend()、append()、before()、after()　なんてまんまだもんなぁ。