Insert node: IE bug or wrong code?

Discussion in 'Javascript' started by Alvaro G. Vicario, Aug 19, 2006.

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

    --
    -+ http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
    ++ Mi sitio sobre programación web: http://bits.demogracia.com
    +- Mi web de humor con rayos UVA: http://www.demogracia.com
    --
     
    Alvaro G. Vicario, Aug 19, 2006
    #1
    1. Advertising

  2. Alvaro G. Vicario

    Guest

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

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

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

    Dan
     
    , Aug 20, 2006
    #2
    1. Advertising

  3. Alvaro G. Vicario

    Randy Webb Guest

    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 :eek:)


    It won't help.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Aug 20, 2006
    #3
  4. 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 напиÑа:
    > 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 :eek:)

    >
    > 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, Aug 20, 2006
    #4
  5. Second version

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

    > >
    > > 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, Aug 20, 2006
    #5
  6. Re: Second version

    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 напиÑа:
    > 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 напиÑа:
    > > 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 напиÑа:
    > > > 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 :eek:)
    > > >
    > > > 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, Aug 20, 2006
    #6
  7. Re: Second version

    *** Georgi Naumov escribió/wrote (20 Aug 2006 04:04:28 -0700):
    > <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 programación web: http://bits.demogracia.com
    +- Mi web de humor con rayos UVA: http://www.demogracia.com
    --
     
    Alvaro G. Vicario, Aug 21, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. wolf
    Replies:
    0
    Views:
    561
  2. Replies:
    0
    Views:
    1,495
  3. Tjerk Wolterink
    Replies:
    2
    Views:
    1,443
    Dimitre Novatchev
    Aug 24, 2006
  4. Replies:
    2
    Views:
    1,823
  5. Sergio del Amo
    Replies:
    4
    Views:
    245
Loading...

Share This Page