Display HTML markup in browser without it being rendered

Starting to implement Javascript, I need to do troubleshooting and would like to output HTML to the screen without it being rendered. I can access the element (in IE) by

document.getElementById("test").outerHTML

I think, but I can't prove what I'm getting to be sure.

So what do I do to have document.write show the entire element including tags?

Do two things (all of these, not just one):

Replace HTML markup with entities: HTML.replace(/&/g, '&').replace(/</g, '<') is enough.
Wrap it in <pre></pre> tags so the whitespace is not eliminated and it is shown in a monospace font.

You can also alert(HTML). In IE on Windows (at least) you can press Ctrl-C and paste the text contents of the dialog box elsewhere to see it plainly.

Two serial replaces is faster than using a function as the second argument of replace(). Three serial replaces is also faster when the string is very long as one might expect from a full HTML document.

Also, using document.write is probably not the best way. If you have a div with id output you can access it this way:

document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre>';

The above code works, I tested it in IE and also in Firefox using FireBug. Note that outerHTML is not supported in Firefox.

Do you mean you want the literal, for example, <b>Hello</b> instead of Hello?

If so, just do a quick:

myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
       '\n': '<br />'
    }[x];
});

Before outputting it. You can apply this to many other characters, say for instance if you wanted to output whitespace literally.

If you're starting out with javascript, now is the best time to learn not to touch unreliable properties; outerHTML is one of them; while supported by IE, Chrome and Opera, Firefox doesn't support it.

Taking the original code, this will work:

var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
docuemnt.write(safe);

But, as much as using "outerHTML" is a bad idea, so is "document.write()". It is much better to have a div with an id on your page, and setting text there, rather than "wherever your code happens to be when document.write() gets called":

<html>
  <head>...</head>
  <body>
    ...
    <div id="mylog"></div>
    ...
 <body>
</html>

And then filling it with either:

// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;

or by using something like jQuery, which gives you an API that hides all the crazy may-or-may-not-be-supported things, and guarantees that if you call it, it'll work:

// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
// add it to the log as text
$("mylog").append(safe);

If the problem is not limited to IE, use firefox and use firebug. console.log is very handy. You can always use alert(myString) but becomes very annoying very soon.

If this is just for testing and you want to quickly brute force it, you can convert every character in the string to it's &#x; equivalent:

var a = "<div>hello</div>";

var b = a.replace(/./g, function(e){
    return "&#"+e.charCodeAt(0)+";";
});

document.write(b);

Live example: http://jsfiddle.net/J89wh/

Here is a quick and easy method I found

1.Download and Install Adobe DreamWeaver,you will get a 30 day trial.

2.Just write the code which you want to put into your website as such in the Design screen of Dream weaver

3.In the code screen,you will get a code for putting the unrendering html code into your website.

For example: When I put the code:

<p>This is a paragraph</p>

inside the design window of DreamWeaver.In the code window,following code is written.

<p>&lt;p&gt;This is a paragraph&lt;/p&gt;</p>

You can do that for every code you want to make appear unrendered in the browser.

来源：https://stackoverflow.com/questions/6221067/display-html-markup-in-browser-without-it-being-rendered

标签

javascript

debugging

outerhtml