confused over a code

confused over a code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
    $(document.body).click(function () { $(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." + "Click to add more.");}).click(); // trigger the click to start
  });
  </script>
  <style> body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left; background:blue; }
span { color:red; }
</style>
</head>
<body>
  <span></span>
<div></div>
</body>
</html>



althoug the body has only one div the output will still show two divs initially...instead of one. why?...i am also not sure what role the click() in the last line of jquery code is doing...clarify both.....