如何使用innerHTML禁用HTML格式？

Question

我想生成一个输入字段，能够将其值“复制”到另一个元素中（在我的案例段落中）。

到目前为止一切正常，但当我尝试输入一些文本字符串时，我遇到了大量的问题...

< b> text < /b> // without the space columns

---

multiple backslashes

...或其他HTML属性/标签......

因为更改innerHTML会将此文本格式化为HTML文本。但我想使用纯文本，包括这些标签/特殊字符。

Input some HTML text<input oninput="out1.innerHTML=this.value" type="text" placeholder="input text">

<p id="out1"></p>


----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.innerHTML=this.value" type="text" value="<b>x</b> \\ %&">

<p id="out2"></p>

如何在不使用文本字段/第二个输入字段的情况下在此特定情况下禁用HTML格式(to copy exact the same text into the paragraph element without styling)？

我考虑过使用.html()和jQuery，但也必须有一些更有效的方法只使用javascript。

Answer 1

我想你应该尝试使用Node.textContent

因为正如文档所说：

Element.innerHTML返回HTML，如其名称所示。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。

Input some HTML text<input oninput="out1.textContent=this.value" type="text" placeholder="input text">

<p id="out1"></p>


----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.textContent=this.value" type="text" value="<b>x</b> \\ %&">

<p id="out2"></p>

Answer 2

你想要.innerText而不是.innerHtml。这引用了the rendered text node。另一方面，innerHtml，sets HTML content，而不仅仅是文本节点。