DIV and InnerHTML differences IE/Firefox

H

Hoss

Hello all-

This is what im trying to achieve. At the top of my page there is some
search functionality, through which you cause to be loaded a string
representing an HTML page. Below this and occuupying about 80% of the
window real estate, there is a DIV. There is also a toggle button with
two options "Code View" and "Text View" as I have named them. Depending
on which mode you are in, you can see the block of HTML either as code
(in other words the tags are not rendered. You see the HTML as it
exists.) or as text (rendered HTML). Consider the following code, which
is a simplified version of the page.

<script language="javascript">
var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";

function ViewDoc()
{
if(mode == "code")
document.getElementById("docArea").innerText = s;
else
document.getElementById("docArea").innerHTML = s;
}
function ChageMode()
{
if(mode == "code")
mode == "text";
else
mode == "code";
}
</script>
<HTML><BODY>
<table>
<tr>
<td>
<input type='button' onclick='ViewDoc()' value='View Document'>
<input type='button' onclick-='ChangeMode() value='Change Mode'>
</td>
</tr>
</table>
<div id='docArea'/>
</BODY></HTML

The variable s contains an actual example of some HTML im trying to
load here (with the contents of the stylesheet omitted.)

Now, the following works fine in Internet Explorer. It does not work at
all in Mozilla Firefox. In firefox, for example, I have to cut out the
stylesheet, or the entire page goes fubar. Without the embedded
stylesheet, the "text" view (rendered html) works just fine. But the
"innerText" does not work in Firefox, and im not sure how to replicate
it.

Thanks in advance-
 
R

RobG

Hoss said on 27/03/2006 8:59 AM AEST:
Hello all-

This is what im trying to achieve. At the top of my page there is some
search functionality, through which you cause to be loaded a string
representing an HTML page. Below this and occuupying about 80% of the
window real estate, there is a DIV. There is also a toggle button with
two options "Code View" and "Text View" as I have named them. Depending
on which mode you are in, you can see the block of HTML either as code
(in other words the tags are not rendered. You see the HTML as it
exists.) or as text (rendered HTML). Consider the following code, which
is a simplified version of the page.

<script language="javascript">
Click to expand...

The language attribute is deprecated, type is required:

var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";
Click to expand...

You can't have newlines in string literals. If the above works at all,
it is due to error correction. I think what you want is:

var s = "<html><head><style type='text/css'>"
+ "My Stylesheet</style><title>MyTitle</title>"
+ "</head><body>";

That will create a 'valid' JavaScript variable called 's', but the
content of s is not valid HTML. Also, even if you make it valid, a
document can only have one body, head and title element so when added to
the document as HTML it will make it invalid.

function ViewDoc()
{
if(mode == "code")
document.getElementById("docArea").innerText = s;
Click to expand...

innerText is not widely supported outside IE. Cross-browser solutions
have been posted, search the archives for 'innerText textContent innerHTML'

else
document.getElementById("docArea").innerHTML = s;
Click to expand...

And now you have an invalid document if 's' contains a title, body or
head element.


[...]

load here (with the contents of the stylesheet omitted.)
Now, the following works fine in Internet Explorer. It does not work at
all in Mozilla Firefox. In firefox, for example, I have to cut out the
stylesheet, or the entire page goes fubar. Without the embedded
stylesheet, the "text" view (rendered html) works just fine. But the
"innerText" does not work in Firefox, and im not sure how to replicate
it.

Thanks in advance-
Click to expand...


Using innerHTML and a regular expression to remove tags:

function getText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
return el.innerHTML.replace(/<[^>]*>/g,'');
}


Using recursion rather than innerHTML or regular expression:

function getText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
return getText2(el);

function getText2(el) {
var x = el.childNodes;
var txt = '';
for (var i=0, len=x.length; i<len; ++i){
if (3 == x.nodeType) {
txt += x.data;
} else if (1 == x.nodeType){
txt += getText2(x);
}
}
return txt.replace(/\s+/g,' ');
}
}
 
H

Hoss

I guess my first post was a little insufficient.

The "s" variable does not in fact have newlines in it- it would have
been better represented the way you put it.
That will create a 'valid' JavaScript variable called 's', but the
content of s is not valid HTML. Also, even if you make it valid, a
document can only have one body, head and title element so when added to
the document as HTML it will make it invalid.
Click to expand...

If this be true, what would be a good way to achieve what im trying to
do? I need to dynamically write an HTML page to an element on my page.
I could use an <iframe>, but then you get problems with dynamically
sizing the height. In any case, the way im describing it (using a DIV)
works perfectly fine in both IE, and Firefox too as long as you cut
out the embedded stylesheet. The only problem is in displaying the HTML
un-rendered into a div in firefox.
Using innerHTML and a regular expression to remove tags:
Click to expand...

Removing the tags defeats the purpose of the entire thing. Im trying to
display the HTML as "code." or exactly what youd see if you wrote it to
a file and loaded it up in Notepad.
 
R

RobG

Hoss said on 27/03/2006 1:58 PM AEST:
I guess my first post was a little insufficient.

The "s" variable does not in fact have newlines in it- it would have
been better represented the way you put it.




If this be true, what would be a good way to achieve what im trying to
do? I need to dynamically write an HTML page to an element on my page.
I could use an <iframe>, but then you get problems with dynamically
sizing the height.
Click to expand...

What is your issue with height? You can set the height of an iFrame to
whatever you want.

Your other options are a frame or a pop-up, neither of which are
particularly liked but there you go.

In any case, the way im describing it (using a DIV)
works perfectly fine in both IE, and Firefox too as long as you cut
out the embedded stylesheet.
Click to expand...

You are depending on your browser to 'fix' the invalid document. You
can't be sure that all browsers will do it the same, or that all
browsers will continue to do it consistently.

The only problem is in displaying the HTML
un-rendered into a div in firefox.
Click to expand...

Because Firefox doesn't support innerText.

Removing the tags defeats the purpose of the entire thing. Im trying to
display the HTML as "code." or exactly what youd see if you wrote it to
a file and loaded it up in Notepad.
Click to expand...

I did that to emulate your use of innerText which removes all the tags.
 
C

Csaba Gabor

RobG said:
Hoss said on 27/03/2006 8:59 AM AEST:

You can't have newlines in string literals. If the above works at all,
it is due to error correction. I think what you want is:

var s = "<html><head><style type='text/css'>"
+ "My Stylesheet</style><title>MyTitle</title>"
+ "</head><body>";
Click to expand...

<span id=foo onclick="alert('But don\'t \
forget&nbsp;to\
mention \n\
&quot;this"')">Click me</span>


Csaba Gabor from Vienna
 
C

Csaba Gabor

[sorry in case you see this twice - my earlier post was overquoting]
Hoss said on 27/03/2006 8:59 AM AEST:

You can't have newlines in string literals.
Click to expand...
....

<span id=foo onclick="alert('But don\'t \
forget&nbsp;to\
mention \n\
&quot;this"')">Click me</span>


Csaba Gabor from Vienna
 
H

Hoss

I did that to emulate your use of innerText which removes all the tags.
Click to expand...

I am sorry, that is incorrect. I am using innerText and it is
displaying the document tags and all. In other words if my string =
"<HTML><HEAD><BODY>" and I say div.innerText = string then this is what
is displayed on the screen

<HTML><HEAD><BODY>
 
R

RobG

Hoss said on 28/03/2006 3:21 AM AEST:
I am sorry, that is incorrect. I am using innerText and it is
displaying the document tags and all. In other words if my string =
"<HTML><HEAD><BODY>" and I say div.innerText = string then this is what
is displayed on the screen

<HTML><HEAD><BODY>
Click to expand...


Ahh, now I see what you are doing - sorry, I was completely on the wrong
track. For all browsers, including IE, use:


var p = document.createElement('pre');
p.appendChild(document.createTextNode(s));
document.getElementById("docArea").appendChild(p);


which will work in any DOM 1 compliant browser, so virtually anything
after IE/NN 4 and certainly anything that supports getElementById.

The use of the 'pre' element isn't essential but it preserves line breaks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript, Firefox, InnerHTML and AJAX 6
Only one table shows up with the information 2
How to have two html audio players on one page? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
I want to Display Excel As HTML In js 2
innerHTML and grave symbol 0
innerHTML? 2
Background image not showing up on html page 3

Members online

No members online now.
Total: 39 (members: 0, guests: 39)
Robots: 468

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top