javascript - I'm trying to replace an span tag in a contenteditable div

Question

In my replace function, i want to add a span tag in html but actually is insert like string... The definitive intention is a change color or style to this element changed.

"use strict";
document.designMode = "on";

let text = document.getElementById('text');

let observer = new MutationObserver(mutations =>
mutations.forEach(mutation => {
    console.log(text.textContent);
    observer.disconnect();// turn observer off;
    text.textContent = text.textContent.replace('e', '<span>e</span>');
   
    const range = document.createRange();
    const textNode = text.firstChild;
    range.setStart(textNode, text.textContent.length);
    range.setEnd(textNode, text.textContent.length);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    observe(); // turn back on 
})
);
  
  const observe = ()=> {
  
    observer.observe(text, {
      childList: true,
      characterData: true,
      subtree: true,
     
    });
  };
  observe();

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
});

<p contenteditable="true" id="text">I'm a text will be change</p>

question from:https://stackoverflow.com/questions/65935229/im-trying-to-replace-an-span-tag-in-a-contenteditable-div

Answer 1

Waitting for answers