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>视为字符串而不是HTML。我不希望HTML渲染，我只想要进入div或跨越它应该呈现的内容。

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

Answer 1

为方便起见，我刚刚向目标<div class="fullscreen">this will be fullscreen with a top offset</div> <div class="body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p> </div>添加了ID：

＆＃13;

textarea

＆＃13;

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

＆＃13;

Answer 2

您需要转义要显示的html

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

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

＆＃13;

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

＆＃13;

Answer 3

使用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 4

使用纯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 5

Pure 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>"

JQuery的：

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

作为最终评论，这些方式是获取/设置。

如何在<span>或<div>标记

5 个答案: