高手门帮我改下！！！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=GBK">  
<title>  MiniMap  </title>  
<script type="text/javascript" src="../js/Navi.js">   </script> 
<style type="text/css">  
body{
margin: 0;
padding:0;
font-size:12px;
}
.main { <!-- 设置矩形-->
position: relative;
width:128px;
height:128px;
border:1px solid #ccc;
}
.main #angle_2 , .main #angle_4 {<!-- 使180和360的位置居中对齐-->
width: 50%;
height: 42px;
line-height: 42px;
}
.main #angle_2 {
float: left;
}
.main #angle_4 {
float: right;
text-align: right;
} 
</style>  
<script>

function drawDot(x,y,color,size)
{
   document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>");
}


function test()
{
drawDot(40,90,"006666",4);
}

function aa() {alert(22);}</script>
</head>  
<body >
<div class="main">
<div id="angle_2">180</div>
<div id="angle_4">360</div>
</div>
<input type=button value='test' onclick='test();'>
</body>  
</html>  以上是我的代码：
现在运行完先会出现个矩形然后，然后TEXT按扭后会只显示个小点
想要的效果是小点在矩形上面，小点和矩形一起出现
等于散分了  提了俩个一样的问题！！！！

解决方案 »

  1.   

    把function drawDot改成下面那样看看:
    function drawDot(x,y,color,size) 
    { 
       var win_box = document.getElementById("main");
       win_box.innerHTML = "<table border='0' cellspacing=0 cellpadding=0> <tr> <td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"> </td> </tr> </table>";
      

  2.   

    补上,在body的<div class="main" id="main"> 中加上红字部分
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    
    <html>    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">    
    <title>   MiniMap   </title>    
    <script type="text/javascript" src="../js/Navi.js">     </script>   
    <style type="text/css">    
    body{ 
    margin: 0; 
    padding:0; 
    font-size:12px; 
    } 
    .main { <!-- 设置矩形--> 
    position: relative; 
    width:128px; 
    height:128px; 
    border:1px solid #ccc; 
    } .main #angle_2 , .main #angle_4 { <!-- 使180和360的位置居中对齐--> 
    width: 50%; 
    height: 42px; 
    line-height: 42px; 
    } 
    .main #angle_2 { 
    float: left; 
    } 
    .main #angle_4 { 
    float: right; 
    text-align: right; 
    }  </style>    
    <script> 
    function drawDot(x,y,color,size) 
    { 
       str = " <div style='position: absolute; left: "+(x)+"px; top: "+(y)+"px;background-color: #"+color+";width:"+size+"px;height:"+size+"px;z-index:123'> </div> "; 
       alert(str)
       div = document.createElement("div")
       div.innerHTML = str
       document.body.appendChild(div);
    } 
    function test() 
    { 
    drawDot(40,90,"006666",4); 
    } function aa() {alert(22);} </script> 
    </head>    
    <body > 
    <div class="main"> 
    <div id="angle_2"> 180 </div> 
    <div id="angle_4"> 360 </div> 
    </div> 
    <input type=button value='test' onclick='test();'> 
    </body>    
    </html>