小问题

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
function testfun(){
$("<div>", {
 "class": "test1",
 text: "Click me!",
 click: function(){
   $(this).toggleClass("test");
  }
}).appendTo("body"); 

}
</script>
</head>
<body>
<input type="button" id="test" onclick="testfun()" value="click">
</body>
</html>
为什么点击出来后的div在前台页面上不显示？