javascript - jQuery render HTML as plain text w toggle (toggle is working fine, but cannot covert the HTML to text) - Stack Over

admin管理员组

文章数量:1356322

Below is my current code. And it is working fine, but I need the .code class element to display as plain text and not render as 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>

This section of the .code class should display on the screen exactly like this (in other words not rendered as HTML just as text):

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

Below is my current code. And it is working fine, but I need the .code class element to display as plain text and not render as 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>

This section of the .code class should display on the screen exactly like this (in other words not rendered as HTML just as text):

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

• javascript
• jquery
• html

Share Improve this question Follow asked Aug 29, 2011 at 17:33 OldWestOldWest 2,38577 gold badges4242 silver badges6262 bronze badges 3

• 1 Is it only the HTML rendering that's the problem? I don't exactly see how the toggling is involved. – pimvdb Commented Aug 29, 2011 at 17:35
• It's preferable to use a "null javascript" href over a hash ("#"), like this: href="javascript://" – Diodeus - James MacFarlane Commented Aug 29, 2011 at 17:40
• Toggling is NOT involved, but it was part of the broader scope to give the full code. – OldWest Commented Aug 29, 2011 at 17:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

try this:

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

of course, if you are doing that to multiple divs, you would need to use .each:

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

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

The proper way to handle this is to escape the code you don't want the browser to render, like this:

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

If you don't then you aren't guaranteed the correct output from the browser since JQuery's .html() tag is a wrapper for .innerHTML (See http://api.jquery./html/) which doesn't always return the exact same markup that you use.

You can take a look at a tool like the one at http://accessify./tools-and-wizards/developer-tools/quick-escape/ to do the escaping for you.

Wikipedia also has a reference of XML/HTML entity codes

Could you not do this from the server?

When the user hits the toggle button pass the html to the server, using php replace the < and > characters with < and > and return the html back to the page.

unless you are dealing with a very large amount of data this shouldn't take long to process. and this way you will get 100% exactly what the original markup is.

本文标签：