TextArea中appendChild问题,怪怪~

在Textarea中添加一个DIV子结点,添加没有问题,添加完后,
发现在当前光标的前面多出了一个位置,然后只要用鼠标点一下Textarea,那个多出来的位置就自动被缩进了`~真奇怪!!想问一下,为什么会多出那个多余的位置呢?欢迎大家给点解决办法~怎么避免?


<HTML>
<HEAD>
<script language="">
<!--
/*
* 在TextArea中添加入DIV的层
*
* @Link:
*/
function appendDivChild( parent,eareaRs,cityPair ){
var msgStyled = eareaRs;
var newDiv = document.createElement('DIV');
newDiv.innerHTML= msgStyled;
parent.appendChild( newDiv );


}

//获取Document中的对象实例
//
function getObject(objName){
if(getObject){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}

/*
* F12事件信息
*
* @Link:
*
*/
function getResult( areaIndex ){

if( window.event.keyCode != 123){
return;
}

//F12按钮执行
var area = getObject( "area" + areaIndex );//显示平台
appendDivChild( area,"Test CC BB UU>","XMNPEK" );

}
-->
</script>
</HEAD>

<BODY>
<textarea name="area0" onKeyDown="getResult( 0 )" rows="20" cols="50"></textarea>
</BODY>
</HTML>