headタグに要素を追加できない。

JavaScript jQuery

JavaScriptでheadタグの中にscriptタグを追加しようとしたのですが、jQueryを使うとなぜか上手くいかないみたいです。


こんな感じでscript要素を作って

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "unko.js");


jQueryのappendメソッドでheadタグに追加したのですが、なぜか追加されません。

$("head").append(script);　// ダメ


jQueryを使わずに追加したら上手くいきました。

document.getElementsByTagName("head")[0].appendChild(script); // できた


なんでー？

実験したソース

<html>
<head>
</head>
<body>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript">
    $(function(){
      // scriptを作る
      var make_script = function(url){
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", url);
        return script;
      };
      var plain_js = make_script("plain.js");
      var jquery_js = make_script("jquery.js");

      $("head").append(jquery_js);
      document.getElementsByTagName("head")[0].appendChild(plain_js);

      var headHTML = document.getElementsByTagName("head")[0].innerHTML;
      puts(headHTML);

      function puts(str){
        var text = document.createTextNode(str);
        document.body.appendChild(text);
        var br = document.createElement("br");
        document.body.appendChild(br);
      }
    });
  </script>
</body>
</html>

追記

下のページを読んで謎がとけました。
jQueryのappend,prepend,before,afterメソッドにscriptタグを含んだDOM要素なり文字列なりを渡したときは、script以外の部分はちゃんと追加されますが、scriptタグの部分は追加されずに、スクリプトがその場で実行(eval)されてしまうのだそうです。

anything from here jQuery の挙動を解読する（32）：jQuery.clean() メソッド解読──jQuery解読(49)

firebugで見てもheadタグに変化はないけど、scriptはちゃんと実行されているから心配しなくてもいいよ。ということみたいです。ほんとうにありがとうございました。