Login/Register
Display HTML markup in browser without it being rendered
Asked Answered
Solved javascriptdebuggingouterhtml
O

6

5

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?

Otoplasty answered 2/6, 2011 at 22:21 Comment(4)
you can set its visibility to hidden or display style to none – Trevethick
What exactly do you mean by "output an element to the screen"? – Orthogenic
Be careful with document.write - you can't use it after the page has finished parsing, or you'll wipe everything else on the page out. You should use DOM manipulation methods (like you show in your example) to add new content to the page. – Willner
He means what is returned by outerHTML, the markup itself. – Myrna
M
9

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

  1. Replace HTML markup with entities: HTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') is enough.
  2. 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.

Myrna answered 2/6, 2011 at 22:25 Comment(0)
B
12

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.

Blanka answered 2/6, 2011 at 22:25 Comment(0)
M
9

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

  1. Replace HTML markup with entities: HTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') is enough.
  2. 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.

Myrna answered 2/6, 2011 at 22:25 Comment(0)
D
2

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);
Dy answered 2/6, 2011 at 22:35 Comment(1)
Thanks. I'm use divs to output in the actual code, I was just looking for a debugging tool to see how things were. After I get a handle on Javascript, I'll get into JQuery. – Otoplasty
A
1

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.

Anacreontic answered 2/6, 2011 at 22:31 Comment(0)
A
1

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/

Armyn answered 2/6, 2011 at 22:50 Comment(0)
H
1

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.

Hollis answered 16/6, 2013 at 9:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.