Inserting at caret position

I have a JavaScript function that is supposed to insert 2 html <br> tags into a textarea (txtUnformattedContent) but instead it is printing the <br><br> at the last point I click anywhere in the browser window. If the last place I click is within txtUnformattedContent the <br><br> appears at the very top of the screen. My code is:


<textarea name="txtUnformattedContent" id="txtUnformattedContent" rows="8" cols="24" onChange="setFormattedContent(this);" onKeyUp="countWords(this);storeCaret(this);" onSelect="storeCaret(this);" onBlur="storeCaret(this);"></textarea>



<a href="#" ONCLICK="insertAtCaret(document.getElementById('txtUnformat tedContent'),'<br><br>');">
<td bgcolor="#FFFFFF" width="33%" align="center" title="Line Break">
Line Break
</td>
</a>



function storeCaret(textEl)
{
if (textEl.createTextRange)
{
textEl.caretPos = document.selection.createRange().duplicate();
}
}

function insertAtCaret (textEl, text)
{
if (textEl.createTextRange && textEl.caretPos)
{
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
{
textEl.value = text;
}
}



Can anyone figure out what the problem is?

Thanks!

When you click on an other element you loose the selection object unless you set the UNSELECTABLE attribute for all the others elements on the page.