Insert node: IE bug or wrong code?

A

Alvaro G. Vicario

The code below inserts a <span> tag 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 <img> tags :(


==== >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,
 
R

Randy Webb

(e-mail address removed) said the following on 8/19/2006 11:27 PM:
<snip>

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

It won't help.
<img id="pic" src="http://www.google.es/images/hp0.gif" />
Click to expand...

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 :eek:)
Click to expand...

It won't help.
 
G

Georgi Naumov

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

Georgi Naumov

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 напиÑа:
 
G

Georgi Naumov

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
How to properly insert a landing page within same container beneath an image element? 0
Wrong Coding 5
Buttons lining up 1
How do I fix this issue in sqaurespace code block? 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Working on mobile css menu with plenty of frustration! 2
Php modal form to email 1

Members online

No members online now.
Total: 49 (members: 2, guests: 47)
Robots: 262

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,809
Latest member
moe77

Latest Threads

Top