I have a contenteditable div and trying to replace `<font>` tag with `<span>` tag but after replacing the html using jQuery `replaceWith()` function cursor defaults to the beginning of the text however I want it at the end of the replacing html.

Here is the [DEMO](http://jsfiddle.net/illumine/Gaqfs/) to reproduce the issue. Let me know if there is any problem reproducing the issue.

Here is demo code gist

```
<div id="test" contenteditable=true>
  <p> <font color="blue">Text to be replaced</font> </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>

```

JS code

```
$('#test').focus();
$('#replace').on({
  mousedown: function (event) {
    event.preventDefault();
  },
  click: function () {
    $('#test').find('font').replaceWith(function () {
      return '<span style="color:red">' + 'New Text' + '</span>'
    });
  }
});

```

EDIT: Here the problem may sound duplicate but it is indeed different as you see the content gets replaced. I might be replacing the part of that text selected by user and not the entire text. So I need to place the cursor at the end of the html which is replacing the original html.