Javascript 在不丢失插入符号位置的情况下更换标签

以下是我试图实现的目标

HTML:

JavaScript:

btn = document.querySelector('button')
btn.onclick = function() {
var replace = document.querySelector("#replaceme");
    replace.outerHTML = '<p id="replaced" contenteditable>' + replace.innerHTML + '</p>';
}

基本上，有一个包含一些内容的div，它是可编辑的。元素不必只是div，它可以是p或h1等

我将做以下工作：

将光标放在div中。假设我将光标放在文本“Hello I am be replacement”之后

单击“替换”按钮。这基本上用p替换了div，但新p的innerHTML与旧div相同

现在光标位置丢失了，因为我有了一组新的DOM元素，即使DOM的内容相同

---

基本上，我希望在不丢失插入符号位置的情况下替换标记，并且我没有在这个项目中使用jQuery。

如果按下按钮，如何保持光标位置。如果你按下按钮，光标就消失了…@TejasPatel:单击字段并按键盘时保存光标位置。也许我错了，但如果你看一下这个JSFIDLE，我会更改按钮的代码以执行“bold”命令。我将光标放在文本内，然后单击按钮。插入符号的位置似乎丢失了，但不是。您只需键入，您将看到在单击按钮之前在同一位置输入的字符。我正在寻找类似的东西在我的问题张贴。检查它可能有助于获得卡雷特的立场，你可以保存和使用最近你想在Internet Explorer上这样做吗

btn = document.querySelector('button')
btn.onclick = function() {
var replace = document.querySelector("#replaceme");
    replace.outerHTML = '<p id="replaced" contenteditable>' + replace.innerHTML + '</p>';
}