Set the caret position always to end in contenteditable div

Question

In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in Chrome and firefox (IE is fine, amazing).

Anyway to make it to work properly in chrome and firefox?

Here is the fiddle

<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>

---

var result = $('#result');
$('.click').click(function () {
    var preHtml = result.html();
    result.html(preHtml + "hello");
    result.focus();
});

I tried adding setStart and setEnd as mentioned in this link but no use.

Solution

I got the solution here thanks to Tim down :). The problem was that I was calling

placeCaretAtEnd($('#result'));

Instead of

placeCaretAtEnd(($('#result').get(0));

as mentioned by jwarzech in the comments.

Working Fiddle