Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<p> and innerHTML 1

Status
Not open for further replies.
SeAL

SeAL

Programmer
Mar 15, 2001
139
FR
Hi everybody,

I get something amazing with IE6.0, here's my snippet :

Code: 
<html>
<head>
<script type="text/javascript"> 
window.onload = function()
{
 document.getElementById('myP').innerHTML = '<pre>I hope this will work :)</pre>';
}
</script> 
</head>
<body> 

<p id="myP"></p>

</body>
</html>

I don't know why but I get an Error with IE6.0 ...

If you create the PRE tag with document.createElement and put the innerHTML to appendChild the PRE to P, there's no error.

If you replace the PRE tag in my string with a SPAN, it will work, but not with a DIV or a nested P ...

This is really strange and i'm just looking for an explication ...

Hope someone get an issue or some information on that problem ...

Aurelien

 
Sort by date Sort by votes
Of all tags mentioned, P is the only one with optional ending tag. IE likes to format paragraph breaks, so this code:
Code: 
<p id="myP><pre>I hope this will work :)</pre></p>
... becomes this:
Code: 
<p id="myP"><pre>I hope this will work :)</pre><p></p>
Now myP has no ending tag, no innerHTML and result is "Unknown runtime error". Front Page (tm) Emulator Unplugged :(
 
Upvote 0 Downvote
I do not really agree with that.

I'm ok on the no closing tag of P but in my example, if you change PRE with SPAN, it works ...

So why there's an innerHTML for SPAN and not for PRE or DIV ??

It's the same with only a textNode, if you only have some text, you can access to the innerHTML ...

Still strange ... Anyone else ????
 
Upvote 0 Downvote
SPAN is inline element, PRE and DIV aren't. This obviously affects formatting:
Code: 
<html>
<head>
<script type="text/javascript"> 
function check( iMode )
{	var aTags = [ "SPAN", "DIV", "PRE", "Q", "DL" ];
	sTag = aTags[iMode];
	with( document.getElementById('myP') )
	{	innerHTML = "<p><" + sTag + ">Blah blah</" + sTag + "></p>";
 		alert( innerHTML );
 	}
}
</script> 	
</head>
<body>

<form>
<input type="button" value="SPAN" onclick="check(0)">
<input type="button" value="DIV" onclick="check(1)">
<input type="button" value="PRE" onclick="check(2)">
<input type="button" value="Q" onclick="check(3)">
<input type="button" value="DL" onclick="check(4)">
</form>

<div id="myP"></div>

</body>
</html>
 
Upvote 0 Downvote
Hello SeAL,

I would suggest this with tag like yours.
Code: 
<script type="text/javascript"> 
window.onload = function()
{
 document.getElementById('myP').outerHTML = '<pre>I hope this will work :)</pre>';
}
</script>
regards - tsuji
 
Upvote 0 Downvote
vongrunt, you're right, i didn't think of inline and block elements :)

here's what i found on w3c :

"The P element represents a paragraph. It cannot contain block-level elements (including P itself)."


thanks so much for this wonderful explication, you get my vote :)
 
Upvote 0 Downvote
I this know it doesn't tell you why your code won't work, but it's an acceptable compromise, I think, with much the same end result ;o)

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		window.onload = function() {
			document.getElementById('myP').innerHTML = '<pre><p>I hope this will work :)</p></pre>';
		}
	//-->
	</script>
</head>
<body>
	<div id="myP"></div>
</body>
</html>

Hope this helps,
Dan
 
Upvote 0 Downvote

I this know it doesn't tell you why your code won't work, but it's an acceptable compromise, I think, with much the same end result ;o)

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		window.onload = function() {
			document.getElementById('myP').innerHTML = '<pre><p>I hope this will work :)</p></pre>';
		}
	//-->
	</script>
</head>
<body>
	<div id="myP"></div>
</body>
</html>

Hope this helps,
Dan
 
Upvote 0 Downvote

*grr* This forum drives me mad sometimes. It hangs forever when you submit an answer, and then when you refresh, see no post, and thus post again, you get 2 posts! Just ignore my second duplicate post.

Dan
 
Upvote 0 Downvote

SPAN is inline element, PRE and DIV aren't
Click to expand...

I thought that initially, too... But after checking the HTML 4.0 specs, it seems as if PRE is an inline element, just the same as P:

Code: 
<!ELEMENT P - O (%inline;)*            -- paragraph -->
<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- preformatted text -->

Which threw me quite a bit!

Dan
 
Upvote 0 Downvote
arrrrgggggg this is amazing !!!

another snippet i try was :

Code: 
<html>
<head>
<script type="text/javascript"> 
window.onload = function()
{
 var oPre = document.createElement('PRE');
 oPre.innerHTML = 'I hope this will work :)';
 document.getElementById('myP').appendChild(oPre);
}
</script> 
</head>
<body> 

<p id="myP"></p>

</body>
</html>

This snippet works except if you put the oPre.innerHTML after the appendChild method.

So, as Dan said, PRE seems to be an inline Element except if you don't set his innerHTML property ...

By the way, I didn't really need this script but i hope to understand this problem for my personnal knowledge :)
 
Upvote 0 Downvote
<confused>
All browsers I know (ff, Opera) render PRE like it is block element. Btw. Mircosoft says this:

</confused>

When IE applies innerHTML, it performs normalization. Basically this makes code less quirky, but result is not the same as original. So far I've seen 5-6 side-effects, including "swallowed" SCRIPT tags (dirty coding, though), trimmed leading spaces and forced paragraph breaks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
733
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
816
AbidingDude
AbidingDude
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
257
ggriffit
ggriffit
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
360
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top