DIV and InnerHTML differences IE/Firefox

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-

Mar 26 '06 #1

Subscribe Post Reply

27098

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

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

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.

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

Csaba Gabor

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 to\
 mention \n\
"this"')">Click me</span>
Csaba Gabor from Vienna

Mar 27 '06 #5

Csaba Gabor

[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 to\
 mention \n\
"this"')">Click me</span>
Csaba Gabor from Vienna

Mar 27 '06 #6

Hoss

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

RobG

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

by: Jake Barnes | last post by:

I wanted to teach myself AJAX this weekend so I sat down with Stuart Landgridge's book and I started to play around. I came up with a little page that you can add text and images to. You can see it...

Javascript

when I add HTML to innerHTML, FireFox renders it as HTML, but IE shows it as plain text

by: Jake Barnes | last post by:

This weekend I wanted to learn AJAX, so I set up a little toy page where I could experiment. The idea of this page is that you click in one of the boxes to get some controls, at which point you can...

Javascript

innerHTML input fields: IE vs FF

by: SimonV | last post by:

Hmm, I let the user add more input fields as needed. But I have a strange problem with ff (and other mozillas) When I add a field in ff, the others lost their content... In IE the content stays...

Javascript

DOM for IE and Firefox

by: Angel | last post by:

I have an application with heavy usage of DOM Initially the application was supposed to be only IE specific, but now we need to support it for Firefox also. As an example consider the...

Javascript

InnerHTML not grabbing entire HTML if <p> is present

by: MaryA | last post by:

Let me preface this with the fact that I am a newbie to HTML, XML and Javascript. Having said that, let me explain my dilemma: I am having a difficult time getting innerHTML to consistently...

Javascript

Dynamic CSS-creation (Firefox)

by: Capricorn | last post by:

Hi, can anybody tell me how you can create a new stylesheet inside a (X)HTML page with JavaScript and Firefox, if the stylesheet is only available as a variable value, like: var CSSStyle =...

Javascript

xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM

by: sonic | last post by:

Ok, i am sure everyone is sick of hearing about this. but i've checked about 10 different posts/sites about this issue, and they all say "use DOM" but i think there is more to be said. Perhaps I...

Javascript

Javascript + InnerHTML problem

by: Henry | last post by:

Hi I have a problem, pls see below: <html> : <script type="text/javascript"> <!-- function addCode () { document.getElementById('emptySpace').innerHTML+=

Javascript

innerHTML text node whitespace question

by: martymix | last post by:

simple question: I have a simple <dt>test text</dt> I get the innerHTML of that dt, and I try and append some text to it like so: dt = document.getElementsByTagName('dt') var text =...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

DIV and InnerHTML differences IE/Firefox

Similar topics