JavaScript/jQuery: how to get HTML and display HTML, including tags
javascript, jquery
Solution
What you need to be able to do is escape the HTML before you output it so that the browser doesn't render the tags contained therein.
You can escape HTML easily using jQuery like this:
var escapedHtml = $('<div />').text($('#html-block').html());
Now you have a string with things like `<div id="html-block">` which you can spit out to the browser:
$('#html-block').after($('<pre />').html(escapedHtml));
All in one you could do this:
var $htmlBlock = $('#html-block');
$('<pre />').text($htmlBlock.html()).insertAfter($htmlBlock);
Problem
I am using jQuery, and have an HTML block as follows: ``` <div id="html-block"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> </div> ``` Which renders as: Heading 1 Heading 2 Heading 3 What I am trying to do is show what HTML was used to create this block. If I use `$(this).clone().insertAfter(this);` simply repeats what we see rendered, but what I actually want to see in my browser is: ``` <div id="html-block"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> </div> ``` What's the best way to do this?