如何将 HTML 元素附加到 contenteditable 元素？答案

【问题标题】：How to append HTML elment to contenteditable element?如何将 HTML 元素附加到 contenteditable 元素？
【发布时间】：2023-01-16 20:52:36
【问题描述】：

我正在构建一个 chrome 扩展，我想将一些元素附加到 this telegraph page ，似乎只有文本附加成功，但不是整个 HTML，我该怎么做？我曾尝试先删除 contenteditable 属性，但它仍然不起作用。

const span = document.createElement("span");
span.innerHTML = "<span>Foo,bar</span>";

const p = document.querySelector("p");
p.appendChild(span);

【问题讨论】：

我can't reproduce the issue。请创建一个minimal reproducible example。

标签： javascript html element

【解决方案1】：

你的代码做追加 span，但内容可编辑元素仍呈现 HTML。您可以看到您正在使用 devtools Inspect 功能附加一个 span，或者通过做一些清晰可见的事情，比如向它添加一个您用另一种颜色设置样式的类：

const span = document.createElement("span");
span.innerHTML = "<span class=x>Foo,bar</span>";

const p = document.querySelector("p");
p.appendChild(span);

.x {
    color: green;
}

&lt;p contenteditable&gt;Testing 1 2 3&lt;/p&gt;

如果你想实际添加字符<、s、a等，你需要将其作为文本（可能来自outerHTML）获取，然后附加作为文本，也许使用insertAdjacentText：

const span = document.createElement("span");
span.innerHTML = "<span>Foo,bar</span>";

const p = document.querySelector("p");
p.insertAdjacentText("beforeend", span.outerHTML);
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^      ^^^^^^^^^^

&lt;p contenteditable&gt;Testing 1 2 3&lt;/p&gt;

【讨论】：