js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值

如果想改变元素的视觉效果（checkbox.checked=true会打钩），请在把元素添加到页面上再为其赋值，否则赋值无效。
看这段代码，18行与21行，如果想在元素还没有添加到页面上时设置其为选中状态，不能做到。写到21行就可以。如果你知道为什么请不吝赐教。

 1  < html >
 2 
 3  < head >
 4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
 5  < title > 新建网页 1 </ title >
 6  </ head >
 7 
 8  < body >
 9 
10  < input  type ="button"  value ="clickme"  onclick ="F()" >
11  </ body >
12  < script  language ="javascript" >
13  <!--
14  function  F(){
15       var  div  =  document.createElement('div')
16       var  input  =  document.createElement('input')
17      input.type  =  'checkbox'
18      input.checked  =   true
19      div.appendChild(input)
20      document.body.appendChild(input)
21       // input.checked = true
22  }
23  // -->
24  </ script >
25  </ html >
26