js写table不显示的问题

<html>
<head>
<title>表情</title>
</head>
<body>
<div id="yf"></div>
<button onclick="book();">测试</button>
<script type="text/javascript" src="jquery.1.7.1.js"></script>
<script type="text/javascript">
function book(){
var path = 'images/';
var rows = 5, cols = 9, total = 135, startNum = 0,
cells = rows * cols, pages = Math.ceil(total / cells),
colsHalf = Math.floor(cols / 2);
var table = document.createElement('table');

$("#yf").append(table);
table.className = 'ke-table';
table.cellPadding = 0;
table.cellSpacing = 0;
table.border = 0;
var pageNum = 1;
var num = (pageNum - 1) * cells + startNum;
for (var i = 0; i < rows; i++) {
var row = table.insertRow(i);
for (var j = 0; j < cols; j++) {
var cell = $(row.insertCell(j));
cell.addClass('ke-cell');
var span = $('<span class="ke-img"></span>')
.css('background-position', '-' + (24 * num) + 'px 0px')
.css('background-image', 'url(' + path + 'static.gif)');
cell.append(span);
num++;
}
}
$("#yf").show();
}
</script>
</body>
</html>
能写出来table，但就是不显示，不知道为什么，求教