How to place caret after image in editable div

**Appazi58** · Aug 17 '10, 08:08 PM

Hi,
I am trying to develop online chat window. For this I opted for content editable div for sending and receiving messages. I have written javascript to add the image when the user clicks on image.
Here the problem is after we click on image it was added into div, but the caret position was before the image. Below is the source code of addImage() method.

Code:

function addImage(obj) {
var divContent1 = document.getElementById("TextEditor").innerHTML;
var imageSource = obj.src;
document.getElementById("TextEditor").innerHTML += '<img src=\"'+imageSource+'\"></img>';
}

I tried the below scenarios to place the caret after the inserted image in editable div.

1) I tried with focus() method, But this place the caret at begining of div.
2) I tried with createTextRange () , but it returns null as value(this might be because of image in the div).
3) I tried with createRange() and tried place the caret at end using moveStart() and moveEnd() as below

Code:

  var oSel = document.selection.createRange();
  oSel.moveStart ('character', -(divContent1.length));
  oSel.moveStart ('character', (divContent1.length));
  oSel.moveEnd ('character', 0);
  oSel.select();

This does nothing and caret was at same location.

I have this problem in all browsers.Please suggest me.