How to add / insert / update text inside contenteditable div at a particular position?

Question

The HTML code looks like this

<div id="txtarea" contenteditable="true">Some text</div>

I have to insert some new text based on some event at a particular position in the above div. The event calls the function say updateDiv(txt, positon). For example it says
updateDiv("more ",5);

So the div should become be

<div id="txtarea" contenteditable="true">Some more text</div>

I tried a lot of javascript and jquery but nothing seem to work.

Answer 1

If the content of your editable <div> always consists of a single text node, this is relatively simple and you can use the code below.

var div = document.getElementById("txtarea");
var textNode = div.firstChild;
textNode.data = textNode.data.slice(0, 5) + "more " + textNode.data.slice(5);

Otherwise, you'll need to read about DOM Ranges (note that they are not supported in IE < 9) and use something like this answer to create a range corresponding to character indices within the content and then use insertNode().

var div = document.getElementById("txtarea");
var range = createRangeFromCharacterIndices(div, 5, 5);
range.insertNode(document.createTextNode("more "));