jQuery将HTML呈现为纯文本w/ toggle (toggle工作正常，但不能将HTML转换为文本)

Question

下面是我当前的代码。它工作得很好，但我需要。code类元素显示为纯文本，而不是呈现为HTML。

jQuery:

$(document).ready(function( ) {
 $('.code').hide();
 $('.codeLink').toggle(
    function() {    
   $(this).next('.code').fadeIn();
     $(this).addClass('close');
    },
    function() {
      $(this).next('.code').fadeOut();
        $(this).removeClass('close');
  }
); // end toggle
});

HTML:

<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The   Code</a>
<div class="code"><a class="benefitsQandA" href="#">Get an Instant Quote &amp;    Apply</a></div>

.code类的这一部分应该完全像这样显示在屏幕上(换句话说，不是作为HTML呈现，只是作为文本):

<a class="benefitsQandA" href="#">Get an Instant Quote &amp; Apply</a>

Answer 1

try this:

$(".code").text($(".code").html());

当然，如果你对多个div这样做，你需要使用。each:

$(".code").each(function(){
    $(this).text($(this).html());
});

Answer 2

使用$(".code").text($(".code").html())

Answer 3

处理此问题的正确方法是转义不希望浏览器呈现的代码，如下所示:

<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The Code</a>
<div class="code">&lt;a class="benefitsQandA" href="#"&gt;Get an Instant Quote &amp;amp; Apply&lt;/a&gt;</div>

如果你不这样做，那么你不能保证浏览器的正确输出，因为JQuery的。html()标签是。innerhtml的包装器(见http://api.jquery.com/html/)，它并不总是返回与你使用的完全相同的标记。

您可以使用类似http://accessify.com/tools-and-wizards/developer-tools/quick-escape/的工具来为您进行转义。

Wikipedia也有XML/HTML实体代码参考

Answer 4

您不能从服务器执行此操作吗?

当用户点击切换按钮传递html到服务器，使用php代替<使用<和>和>字符，并将html返回到页面。

除非您正在处理非常大量的数据，否则应该不会花费很长时间来处理。这样你就能得到100%的原价。