How To Make A Div Appear On A Different Location

i think this is what you are talking about. i spent all night doing this for you, i hope you can appreciate it

<?
echo '<PRE>';print_r($_POST);echo '</PRE>'; 

?>
<script type="text/javascript">
addComment={
	moveForm:
	function(d,f,i,c){
		document.getElementById(i).style.display="block";
		var m=this,
		a,
		h=m.I(d),
		b=m.I(i),
		l=m.I("cancel-comment-reply-link"),
		j=m.I("comment_parent"),k=m.I("comment_post_ID");
		
		if(!h||!b||!l||!j){
			return
		}
		m.respondId=i;
		c=c||false;
		if(!m.I("wp-temp-form-div")){
			a=document.createElement("div");
			a.id="wp-temp-form-div";
			a.style.display="none";
			b.parentNode.insertBefore(a,b)
		}
		h.parentNode.insertBefore(b,h.nextSibling);
		if(k&&c){
			k.value=c
		}
		j.value=f;
		l.style.display="";
		l.onclick=function(){
			var n=addComment,e=n.I("wp-temp-form-div"),o=n.I(n.respondId);
			document.getElementById(i).style.display="none";
			if(!e||!o){
				return
			}
			n.I("comment_parent").value="0";
			e.parentNode.insertBefore(o,e);
			e.parentNode.removeChild(e);
			this.style.display="none";
			this.onclick=null;
			return false
		};
		try{
			m.I("comment").focus()
		}
		catch(g){}
		return false
	}
	,I:function(a){
		return document.getElementById(a)
	}
};

</script>
<style type="text/css">
.even {
	border: 1px solid #CCC;
	padding:10px;
	background-color: #CCC;
}
.odd {
	border: 1px dashed #EEE;
	padding:10px;
}
#respond{
	border: 2px solid #000;
	width: 500px;
	background-color: #FFF;
	padding: 5px;
	display:none;
}
.cancel{
	text-align: right;	
}
</style>


<div id="respond">
  <div class="cancel"><a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">[X]</a></div>
  <form action="" method="post" id="commentform">
            <p><input type="text" name="author" id="cauthor" value="Name" size="22" tabindex="1" class="inputoff" /></p>
            <p><input type="text" name="email" id="cemail" value="Email" size="22" tabindex="2" class="inputoff" /></p>
    <p><textarea name="comment-d12d5"  cols="45" rows="5" tabindex="4" class="inputoff">Comment</textarea>
    <textarea id="comment" name="comment" rows="1" cols="1" style="display:none"></textarea></p>
    <p><button name="submit" type="submit" id="submit" tabindex="5">Submit</button><input type='hidden' name='comment_post_ID' value='3941' id='comment_post_ID' /><input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p>
  </form>
</div>
        						
                       
<div class="even">
    <div class="body" id="comment-8238">
        <a rel='nofollow' class='comment-reply-link' href='?replytocom=8238#respond' onclick='return addComment.moveForm("comment-8238", "8238", "respond", "3941")'>Reply</a>											
      <p>Hi these are just some comments i am putting as example "comment-8238", "8238", "respond", "3941"</p>
    </div>
</div>
    
    
<div class="odd">
	<div class="body" id="comment-8239">
		<a rel='nofollow' class='comment-reply-link' href='?replytocom=8239#respond' onclick='return addComment.moveForm("comment-8239", "8239", "respond", "3941")'>Reply</a>											
		<p>thank youfor this article, it helped me alot to learn about what you are talking about "comment-8239", "8239", "respond", "3941"</p>
</div>
</div>
    
<div class="even">
	<div class="body" id="comment-8240">
		<a rel='nofollow' class='comment-reply-link' href='?replytocom=8240#respond' onclick='return addComment.moveForm("comment-8240", "8240", "respond", "3941")'>Reply</a>											
		<p>I like to ask a question, please send me all the answer to my email "comment-8240", "8240", "respond", "3941"</p>
	</div>
</div>

    
<div class="odd">
	<div class="body" id="comment-8241">
		<a rel='nofollow' class='comment-reply-link' href='?replytocom=8241#respond' onclick='return addComment.moveForm("comment-8241", "8241", "respond", "3941")'>Reply</a>											
		<p>COOL!, i am really learning something now "comment-8241", "8241", "respond", "3941"</p>
	</div>
</div>