JSFiddle - React, Tailwind, and code Playground

HTML

<div id="replaceme" contenteditable>Hello I am to be replaced. But the cursor position inside this div needs to be retained after replacement.</div>

<button>REPLACE</button>

CSS

#replaceme {
    background: #eee;
}
#replaced {
    background: #ff0;
}

JavaScript

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