用户输入时更新内容可编辑的文本

Question

如何在不镜像我的内容的情况下有效地更新我的contenteditable元素的内容？

期望的结果：<p>Hello</p>

当前结果：<p>olleH</p>

const editor = document.createElement("div");
document.body.appendChild(editor);
editor.addEventListener("keyup", handleChange, false);
editor.setAttribute("contenteditable", "true");
editor.setAttribute(
  "style",
  "background-color: lightgrey; height:50vh; width: 100vw"
);

function handleChange() {
  editor.innerHTML = `<p>${editor.textContent}</p>`
}

Answer 1

将<p>${editor.innerHTML}</p>更改为<p>${editor.textContent}</p>

const editor = document.createElement("div");
document.body.appendChild(editor);
editor.addEventListener("keyup", handleChange, false);
editor.setAttribute("contenteditable", "true");
editor.setAttribute(
  "style",
  "background-color: lightgrey; height:50vh; width: 100vw"
);

function handleChange() {

  editor.innerHTML = `<p>${editor.textContent}</p>`
}