オブジェクトの操作その２（HTML）

jQuery オブジェクトの操作

今度はテキストではなくてHTMLとして操作する。

<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() {
        //取り出す。
      　var div3text = $("#div3").text(); //テキスト
        var div3html = $("#div3").html(); //HTML
        //表示してみる。
        alert(div3html);
        //テキスト全体を平文でブルーにしてみる。
        $("#div3").html("<span style='color: blue;'>" + div3text + "</span>");
        alert("textでタグを含む文字列を挿入したらどうなる？");
        $("#div3").text("<span style='color: blue;'>" + div3text + "</span>");
      })
    </script>
  </head>
  <body>
    <!-- タグ情報がHTMLとして取り出せるかどうか。
　　　　　また生成したタグを挿入できるかのテスト -->
    <div id="div3">ぱんぱか<span id="span1">ぱんつで<span style="color: red; font-size: 20pt;">ぱんぱかぱん</span></span></div>
  </body>
</html>

textでタグ付きの文字列を挿入すると、まんま挿入されるんじゃなくてエスケープされた文字列が表示されるんだね〜。すげ〜。


全然詳しくは知らないんだけど、XSSとかを極力防ぐための方針かなんかかな。。