JavaScript

Question

当我尝试使用这样的文本区域的 innerHTML 更改 document.documentElement.innerHTML 时：

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

#mytextarea 的 innerHTML 不是用作实际 HTML 来更改 DOM，而是作为纯文本。

例如：如果#mytextarea的innerHTML是<p>A paragraph</p>。

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

我应该怎么做才能使用 #mytextarea 中的值来更改 DOM？（例如追加新元素）

Answer 1

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

&lt;p&gt;A paragraph&lt;/p&gt;

那个奇怪的代码将显示为

<p>A paragraph</p>

如果你不知道密码，就用这个：HTML Encoder

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

Answer 2

使用 .value 获取文本区域的内容而不对其进行编码。

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

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

</div>

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