如何在内部<span>或</span>内部转义 HTML<div> <span>标签</span>

Question

<h4>    
  <span class="title">
      <textarea rows="4" cols="50"> How are you. </textarea>
  </span>
</h4>

如何考虑<textarea rows="4" cols="50"> How are you. </textarea> <textarea rows="4" cols="50"> How are you. </textarea>作为字符串而不是 HTML。 我不希望 HTML 呈现，我只想要它应该呈现的 div 或 span 中的任何内容。

预期结果： <textarea rows="4" cols="50"> How are you. </textarea> <textarea rows="4" cols="50"> How are you. </textarea>

Answer 1

使用 JQuery 只需使用 text() 而不是 html() 来插入代码：

 $('span').text('<textarea rows="4" cols="50"> How are you. </textarea>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4> <span class="title"></span> </h4>

Answer 2

使用纯 JavaScript，无需任何库，您可以使用函数将代码作为文本节点插入某个容器中。

 function insertAsText( containerId, text ) { var container = document.getElementById( containerId ); var textNode = document.createTextNode( text ); container.appendChild( textNode ); } insertAsText( "myDiv", "<p><textarea>test</textarea></p>");

 <div id="myDiv"></div>

Answer 3

为方便起见，我只是在目标textarea添加了一个 ID：

 console.log(document.getElementById('txtArea'));

 <h4> <span class="tip" 4 "=" cols="50" original-title="title"> Hi hello <span class="title"><textarea rows="4" cols="50" id="txtArea"> How are you. </textarea></span> </span> </h4>

Answer 4

您需要转义要显示的 html

&lt; is <
&quot; is ""
&gt; is >

这里有一个在线工具可以为您执行此操作，但您可以找到许多可以在运行时执行此操作的脚本。

 <h4> <span class="title"> &lt;textarea rows=&quot;4&quot; cols=&quot;50&quot;&gt; How are you. &lt;/textarea&gt; </span> </h4>

Answer 5

纯 JavaScript：

document.getElementsByClassName("title")[0].innerHTML = "<div>HI!</div>";
//Result will be "HI!"
document.getElementsByClassName("title")[0].innerText = "<div>HI!</div>";
//Result will be "<div>HI!</div>"

查询：

$(".title").html("<div>HI!</div>");
//Result will be "HI!"
$(".title").text("<div>HI!</div>");
//Result will be "<div>HI!</div>"

作为最后的评论，这些方法是 get/set。