2 weird cases of Javascript

**winterheat** · Mar 5, 2009 21:32

i was trying some test of Javascript, and then if I use

Code:

		<div id="divOutput" style="white-space: pre"></div>


		<script>

		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "hello\n";
		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "world\n";

		</script>

then nothing is shown in IE 7 or FF 3, but it shows on Chrome... so I wonder which one is correct and why not showing?

And then when I add the HTML 4.01 strict doctype and make it validate:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>

		<title>
			JS test
		</title>
		
	</head>
	
	<body>
		
		<div id="divOutput" style="white-space: pre"></div>


		<script type="text/javascript">

		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "hello\n";
		  document.getElementById('divOutput').innerHTML = document.getElementById('divOutput').innerHTML + "world\n";

		</script>

then something shows on IE 7, FF 3, and Chrome, but on IE 7, the lines are not broken down into 2 lines, as expected by the "white-space: pre". On FF 3 and Chrome, they are broken into 2 lines. So this is another weird thing... and is FF 3 and Chrome more correctly doing it? Many thanks.

**winterheat** · Mar 5, 2009 21:46

PS: one more weird thing when I use innerText instead of innerHTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>

		<title>
			JS test
		</title>
		
	</head>
	
	<body>
		
		<div id="divOutput" style="white-space: pre"></div>


		<script type="text/javascript">

		  document.getElementById('divOutput').innerText = document.getElementById('divOutput').innerText + "hello\n";
		  document.getElementById('divOutput').innerText = document.getElementById('divOutput').innerText + "world\n";

		</script>

IE 7 shows helloworld. FF 3 shows nothing, and Chrome shows

hello
world

**felgall** · Mar 5, 2009 22:35

Firefox doesn't support innerText - you need to use textContent instead.

**crmalibu** · Mar 5, 2009 23:01

I remember running into an issue with IE when I dynamically updated the innerhtml of a pre element using javascript. It would lose the preformated semantics except for monospace font. I don't remember what version of IE, but I'm sure google knowns. Try making a new element and replacing it, instead of updating it. I think that worked.

User Tag List

Thread: 2 weird cases of Javascript

Thread Tools

Display

2 weird cases of Javascript

Bookmarks

Bookmarks

Posting Permissions