contenteditable, установить курсор в конце текста (кросс-браузер)

вывод в Chrome :

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

Я полагаю, что в FF это будет выглядеть примерно так:

hey
<br />
what's up?

и в IE :

hey
<p>what's up?</p>

к сожалению, нет хорошего способа сделать так, чтобы каждый браузер вставляет
вместо div- или p-тега, или, по крайней мере, я не мог ничего найти в Интернете.

В любом случае, я пытаюсь сделать сейчас, когда Я нажимаю кнопку , я хочу, чтобы курсор был установлен в конце текста, поэтому он должен выглядеть примерно так:

hey
what's up?|

в любом случае, чтобы он работал во всех браузерах ?

пример:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }