469,292 Members | 1,454 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,292 developers. It's quick & easy.

DIV and InnerHTML differences IE/Firefox

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-

Mar 26 '06 #1
7 26873
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">
The language attribute is deprecated, type is required:

<script type="text/javascript">

var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";
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;
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;
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-

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[i].nodeType) {
txt += x[i].data;
} else if (1 == x[i].nodeType){
txt += getText2(x[i]);
}
}
return txt.replace(/\s+/g,' ');
}
}
--
Rob
Mar 26 '06 #2
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.
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:


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.

Mar 27 '06 #3
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.

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.

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.


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.
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.


Because Firefox doesn't support innerText.

Using innerHTML and a regular expression to remove tags:

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.


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

--
Rob
Mar 27 '06 #4
RobG wrote:
Hoss said on 27/03/2006 8:59 AM AEST:
Consider the following code, which
is a simplified version of the page. .... var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";


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>";


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

Mar 27 '06 #5
[sorry in case you see this twice - my earlier post was overquoting]

RobG wrote:
Hoss said on 27/03/2006 8:59 AM AEST:
Consider the following code, which
is a simplified version of the page. .... var mode = "code";
var s = "<html><head>
<style type="text/css">
My Stylesheet
</style>
<title>
MyTitle
</title>
</head>
<body>";


You can't have newlines in string literals.

....

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

Mar 27 '06 #6

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


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>

Mar 27 '06 #7
Hoss said on 28/03/2006 3:21 AM AEST:
I did that to emulate your use of innerText which removes all the tags.

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>

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.
--
Rob
Mar 27 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by SimonV | last post: by
6 posts views Thread by Angel | last post: by
3 posts views Thread by Capricorn | last post: by
4 posts views Thread by Henry | last post: by
9 posts views Thread by martymix | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.