I have a jquery AJAX function which retrieves some HTML markup and displays it on the page. I would also like to display the html code of this HTML returned. I've looked around for a solution but not finding any. Can someone please help. Many thanks

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
     //Show HTML
     $('#output').html(data);

     //Show HTML code
     $('#output_code').html(data);
});

I have a jquery AJAX function which retrieves some HTML markup and displays it on the page. I would also like to display the html code of this HTML returned. I've looked around for a solution but not finding any. Can someone please help. Many thanks

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
     //Show HTML
     $('#output').html(data);

     //Show HTML code
     $('#output_code').html(data);
});

• javascript
• jquery
• html

• By html code do you mean you literally want the webpage to display <div></div> or would you rather it render the div? – Tomas Reimers Commented Jan 17, 2012 at 20:01
• 1 Look at this question. – PrimosK Commented Jan 17, 2012 at 20:03

6 Answers 6

try using the text() function. This will escape and display html code. http://api.jquery.com/text/

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
  //Show HTML
  $('#output').html(data);
  //Show HTML code
  $('#output_code').text(data);
});

You can surround your html with "code" and it should display it as is without rendering the html:

$('#output_code').html("<code>" + data + "</code>");

Put the output in a textarea. It will maintain the formatting. (if the HTML contains a textarea, you'll have to escape it first).

You can try to use escape on the HTML data. Try this

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
    //Show HTML
    $('#output').html(data);
    //Show HTML code
    $('#output_code').html(escape(data));
});

The code returned and displayed by the AJAX is anything created and output by the PHP script you are calling. All of the code should be present so you may need to adjust the output of the PHP to include the elements you want.

What does the PHP page do? database work? query and display results? what you should see in the AJAX results is the same thing you would get if you tried the php script on its own.

From your code it looks like this is sent back from a PHP file, if so you could just use one of PHP's htmlentities functions to convert the result before sending it back to the Ajax function, and it will display just fine, preferrably in a html pre tag.

You should also use jQuery text() and not html().

If you would like syntax highlighting, line numbers and lots of other stuff, GeSHi and Syntax Highlighter is used by a lot of sites to display code snippets.