Установите позицию каретки всегда, чтобы закончить контент-доступный div

В моем проекте я пытаюсь установить положение каретки всегда до конца текста. Я знаю, что это поведение по умолчанию, но когда мы добавляем некоторый текст динамически, позиция каретки меняется на начальную точку в Chrome и firefox (IE - это прекрасно, потрясающе).

В любом случае, чтобы он работал правильно в chrome и firefox?

Вот 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();
});

Я попытался добавить setStart и setEnd, как упоминалось в этой ссылке но не использовать.

Ответ 1

Я получил решение здесь благодаря Tim down:). Проблема заключалась в том, что я звонил

placeCaretAtEnd($('#result'));

Вместо

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

как упоминалось jwarzech в комментариях.

Рабочий скрипт