使用contenteditable = true设置div的值

Question

给定一个带有contenteditable=true的div，如何将文本添加到元素中？

<div aria-autocomplete="list" contenteditable="true" role="textbox" spellcheck="true">

</div>

我已经尝试过document.activeElement.value，但是由于它是一个div，因此无法设置该值

Answer 1

您只需更改div的innerHTML。例如：

document.activeElement.innerHTML = "Changed text";

您还可以通过获取相同的属性来获取div的当前内容，例如：

alert("User entered text: " + document.activeElement.innerHTML);

Answer 2

关于innerHTML的其他答案，如果innerHTML未经消毒，恐怕会使攻击者有机会运行不需要的恶意代码。

我宁愿选择textContent，因为OP希望添加文本。

HTML：

<div id="content" aria-autocomplete="list" contenteditable="true" role="textbox" spellcheck="true">

</div>

JAVASCRIPT：

document.getElementById('content').textContent = 'My text';

如果您也想呈现HTML标签，则需要一个清理回调来过滤 SCRIPT 标签之类的标签。