Chrome:动态创建的<style>标签没有内容?

我在尝试编写跨浏览器脚本时遇到了一个奇怪的问题。基本上我的头像是这样的

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

然后在body标签中:

<p id="hey">Hey</p>
<input type="button" value="attachStyle" name="attachStyle" onclick="attachStyle();"></input>
<script>
function attachStyle() {
  var strVar="";
  strVar += "<style type='text\/css'>#hey {border:5px   solid   red;}<\/script>";
  $("head").append(strVar);
}
</script>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>

我很好奇是什么原因造成的?如何以跨浏览器的方式创建CSS样式?谢谢!