Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Insert node: IE bug or wrong code?

Alvaro G. Vicario
Guest
  
Posts: n/a
#1: Aug 19 '06
The code below inserts a <spantag around the image. It works fine in
Firefox or Opera, but has a weird effect in Internet Explorer: browser
keeps loading the image forever... Even though the picture *is* displayed,
status bar and throbber won't stop showing activity. Apart from that,
scripts work even in IE.

Is it an IE bug or is there something wrong with my code? I've googled
about it but couldn't find the right keywords...

The snippet comes from a larger function that surrounds a given node
(possibly with child nodes) with a new node. So if I have:

<p>Foo <strong>bar</strong></p>

I'd call surroundWithNewNode(p, 'div') and get:

<div><p>Foo <strong>bar</strong></p></div>

It's annoying that I can't use it against <imgtags :(


==== >8 ==================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p, span, #pic{
padding: 5px;
}
p{
background-color: white;
}
#pic{
padding: 10px;
background-color: black;
}
span{
background-color: green;
}
--></style>
</head>
<body>

<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>

<p>If you can see green, scripts works.</p>

<script type="text/javascript"><!--
var pic=document.getElementById('pic');
var span=document.createElement('span');

span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
//--></script>

</body>
</html>

==== >8 ==================


Thank you in advance,

--
-+ http://alvaro.es - lvaro G. Vicario - Burgos, Spain
++ Mi sitio sobre programacin web: http://bits.demogracia.com
+- Mi web de humor con rayos UVA: http://www.demogracia.com
--

danrumney@warpmail.net
Guest
  
Posts: n/a
#2: Aug 20 '06

re: Insert node: IE bug or wrong code?

<snip>
Quote:
<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>
<snip>

Not sure if this will help, but try closing the IMG element.

<img id="pic" src="http://www.google.es/images/hp0.gif" />

It might help... it might not... just a suggestion :o)

Dan
Randy Webb
Guest
  
Posts: n/a
#3: Aug 20 '06

re: Insert node: IE bug or wrong code?

danrumney@warpmail.net said the following on 8/19/2006 11:27 PM:
Quote:
<snip>
>
Quote:
><p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
>picture</p>
>
<snip>
>
Not sure if this will help, but try closing the IMG element.
It won't help.
Quote:
<img id="pic" src="http://www.google.es/images/hp0.gif" />
That is invalid HTML and will result in error-correction taking place.
Since IE doesn't support xHTML in *any* form, whether it is valid xHTML
or not is irrelevant in IE.
Quote:
It might help... it might not... just a suggestion :o)
It won't help.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Georgi Naumov
Guest
  
Posts: n/a
#4: Aug 20 '06

re: Insert node: IE bug or wrong code?

Did you try to make this after the document is loaded? Something like
this. It works fine
for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p, span, #pic{
padding: 5px;
}

p{
background-color: white;
}

#pic{
padding: 10px;
background-color: black;
}

span{
background-color: green;
}

--></style>
</head>
<body>

<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>

<p>If you can see green, scripts works.</p>

<script type="text/javascript"><!--
window.onload=function(){
var pic=document.getElementById('pic');
var span=document.createElement('span');

span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
}
//--></script>

</body>
</html>
Randy Webb написа:
Quote:
danrumney@warpmail.net said the following on 8/19/2006 11:27 PM:
Quote:
<snip>
Quote:
<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>
<snip>

Not sure if this will help, but try closing the IMG element.
>
It won't help.
>
Quote:
<img id="pic" src="http://www.google.es/images/hp0.gif" />
>
That is invalid HTML and will result in error-correction taking place.
Since IE doesn't support xHTML in *any* form, whether it is valid xHTML
or not is irrelevant in IE.
>
Quote:
It might help... it might not... just a suggestion :o)
>
It won't help.
>
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Georgi Naumov
Guest
  
Posts: n/a
#5: Aug 20 '06

re: Insert node: IE bug or wrong code?

I like ordered code. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p, span, #pic{
padding: 5px;
}
p{
background-color: white;
}

#pic{
padding: 10px;
background-color: black;
}

span{
background-color: green;
}

-->
</style>
<script type="text/javascript">
<!--
function handleImage()
{
var pic=document.getElementById('pic');
var span=document.createElement('SPAN');
span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
}
window.onload=handleImage;
//-->
</script>
</head>
<body>
<p>
This is
<img id="pic" src="http://www.google.es/images/hp0.gif" alt="google
image"a
picture
</p>
<p>
If you can
see green,
scripts works.
</p>
</body>
</html>

Georgi Naumov написа:
Quote:
Did you try to make this after the document is loaded? Something like
this. It works fine
for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p, span, #pic{
padding: 5px;
}
>
p{
background-color: white;
}
>
#pic{
padding: 10px;
background-color: black;
}
>
span{
background-color: green;
}
>
--></style>
</head>
<body>
>
<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>
>
<p>If you can see green, scripts works.</p>
>
<script type="text/javascript"><!--
window.onload=function(){
var pic=document.getElementById('pic');
var span=document.createElement('span');
>
span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
}
//--></script>
>
</body>
</html>
Randy Webb написа:
Quote:
danrumney@warpmail.net said the following on 8/19/2006 11:27 PM:
Quote:
<snip>
>
><p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
>picture</p>
>
<snip>
>
Not sure if this will help, but try closing the IMG element.
It won't help.
Quote:
<img id="pic" src="http://www.google.es/images/hp0.gif" />
That is invalid HTML and will result in error-correction taking place.
Since IE doesn't support xHTML in *any* form, whether it is valid xHTML
or not is irrelevant in IE.
Quote:
It might help... it might not... just a suggestion :o)
It won't help.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Georgi Naumov
Guest
  
Posts: n/a
#6: Aug 20 '06

re: Insert node: IE bug or wrong code?

May be this is much cleverly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p, span, #pic{
padding: 5px;
}
p{
background-color: white;
}

#pic{
padding: 10px;
background-color: black;
}

span{
background-color: green;
}

-->
</style>
<script type="text/javascript">
<!--
function handleImage(aImg)
{
if(aImg.tagName != "IMG")
return;
/*****************************
Without line below we
have very funny result.
******************************/
aImg.setAttribute("onload", "");
var span=document.createElement('SPAN');
span.appendChild(aImg.cloneNode(true));
aImg.parentNode.replaceChild(span, aImg);
}
//-->
</script>
</head>
<body>
<p>
This is
<img id="pic" src="http://www.google.es/images/hp0.gif"
onload="handleImage(this);" alt="google image"a
picture
</p>
<p>
If you can
see green,
scripts works.
</p>
</body>
</html>
Georgi Naumov написа:
Quote:
I like ordered code. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p, span, #pic{
padding: 5px;
}
p{
background-color: white;
}
>
#pic{
padding: 10px;
background-color: black;
}
>
span{
background-color: green;
}
>
-->
</style>
<script type="text/javascript">
<!--
function handleImage()
{
var pic=document.getElementById('pic');
var span=document.createElement('SPAN');
span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
}
window.onload=handleImage;
//-->
</script>
</head>
<body>
<p>
This is
<img id="pic" src="http://www.google.es/images/hp0.gif" alt="google
image"a
picture
</p>
<p>
If you can
see green,
scripts works.
</p>
</body>
</html>
>
Georgi Naumov написа:
Quote:
Did you try to make this after the document is loaded? Something like
this. It works fine
for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p, span, #pic{
padding: 5px;
}

p{
background-color: white;
}

#pic{
padding: 10px;
background-color: black;
}

span{
background-color: green;
}

--></style>
</head>
<body>

<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif">a
picture</p>

<p>If you can see green, scripts works.</p>

<script type="text/javascript"><!--
window.onload=function(){
var pic=document.getElementById('pic');
var span=document.createElement('span');

span.appendChild(pic.cloneNode(true));
pic.parentNode.replaceChild(span, pic);
}
//--></script>

</body>
</html>
Randy Webb написа:
Quote:
danrumney@warpmail.net said the following on 8/19/2006 11:27 PM:
<snip>

<p>This is <img id="pic" src="http://www.google.es/images/hp0.gif"a
picture</p>

<snip>

Not sure if this will help, but try closing the IMG element.
>
It won't help.
>
<img id="pic" src="http://www.google.es/images/hp0.gif" />
>
That is invalid HTML and will result in error-correction taking place.
Since IE doesn't support xHTML in *any* form, whether it is valid xHTML
or not is irrelevant in IE.
>
It might help... it might not... just a suggestion :o)
>
It won't help.
>
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Alvaro G. Vicario
Guest
  
Posts: n/a
#7: Aug 21 '06

re: Insert node: IE bug or wrong code?

*** Georgi Naumov escribi/wrote (20 Aug 2006 04:04:28 -0700):
Quote:
<img id="pic" src="http://www.google.es/images/hp0.gif"
onload="handleImage(this);" alt="google image"a
You were right, the key was adding an "onload" event to the image! Thanks a
lot.


--
-+ http://alvaro.es - lvaro G. Vicario - Burgos, Spain
++ Mi sitio sobre programacin web: http://bits.demogracia.com
+- Mi web de humor con rayos UVA: http://www.demogracia.com
--
Closed Thread

« previous question | next question »

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved