JavaScript - 使用innerHTML作为实际的html而不是纯文本

Question

当我尝试使用像这样的textarea的document.documentElement.innerHTML更改innerHTML时：

document.documentElement.innerHTML = document.querySelector('#mytextarea').innerHTML

innerHTML的{​​{1}}不是用作更改DOM的实际HTML，而是用作纯文本。

例如：如果#mytextarea的{​​{1}}为innerHTML。

然后加载后的文档看起来像：#mytextarea而不是<p>A paragraph</p>

我该怎么做才能使用<p>A paragraph</p>中的值来改变DOM？ （例如附加新元素）

Answer 1

使用.value获取textarea的内容而不进行编码。

document.getElementById("documentElement").innerHTML = document.querySelector('#mytextarea').value;

<textarea id="mytextarea">
<p>A paragraph</p>
</textarea>
<div id="documentElement">

</div>

Answer 2

您可以在不使用任何JavaScript的情况下轻松实现此目的。您只需在HTML代码中插入特殊字符即可。

<p>A paragraph</p>

奇怪的代码将显示为

<p>A paragraph</p>

如果您不知道这些代码，请使用此代码：HTML Encoder

编辑： 它们被称为HTML转义字符，或HTML实体。以下是其中很多列表：List