javascript: Range selection issue in firefox

Question

I am facing an issue firefox.

I am trying to insert 'br' tag in a content editable div with the following code.

This code is taken from Insert html at caret in a contenteditable div

function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
   }
}

The selection works fine in all browsers except firefox.

In firefox, the caret is positioned at the beginning of the current line instead of the next line. But when I start typing the characters are inserted in the next line as expected.

What needs to be done here to place the caret at the beginning of the next line?

For quick validation you can use this jsfiddle http://jsfiddle.net/jwvha/378/ You can just try inserting 'br' tag and you will see the issue I am referring to in firefox.