在 html 内容中显示 html 标签，在 html 中显示 html 代码片段

Question

我想知道是否有一种方法可以应用htmlentities()，var x这样如果我将<p>hello</p>放入text area并按下按钮，它将使用以下代码 显示<p>hello</p>而不是hello 。提前致谢function myFunction1() {  var x = document.getElementById("myText1").value;  document.getElementById("demo1").innerHTML = x;}<textarea name="myText" id="myText1" type="text"></textarea><button onclick="myFunction1()">thing</button><p><span id="demo1"></span></p>

Answer 1

你需要使用<xmp>标签

<xmp>

  <p>hello</p>

</xmp>

function myFunction1() {

  var x = document.getElementById("myText1").value;

  document.getElementById("demo1").innerHTML = x;

}

<textarea name="myText" id="myText1" type="text"></textarea>

<button onclick="myFunction1()">Show</button>

<p><xmp id="demo1"></xmp></p>

Answer 2

通常这是通过将<符号替换为“小于”HTML 编码 ( <) 和>“大于” ( >) 来完成的。

例如，您应该使用基本的字符串方法来替换类似

"<p>hello</p>"

和

"<p>hello</p>"

（否则，将其添加到元素的 innerHTML 会将其读取为 HTML，包括标签。）

我应该指出，您也可以尝试将所有内容都包装在<pre>标签中，但我得到了不同的结果。我认为上面的方法是一个更安全的选择。