#683 bug
TomE

Element.replace on a div in IE does not remove element

Reported by TomE | May 22nd, 2009 @ 08:57 AM

I think that in IE8 (and perhaps other IE versions, I don't have them to test) calling Element.replace on a div does not remove the element and then replace it with the new element, but rather just sets the outerHTML of the original element. My reading of the API documentation states that replace will remove the element.

As far as I can see, in the overloaded replace function for IE (line 2464 of stable prototype.js 1.6.0.3) the replace as I call it in the example below falls through a number of checks and, since div is not in the Element._insertionTranslations.tags table, the following is executed: 'else element.outerHTML = content.stripScripts();'

I believe that results in overwriting the original element, rather than removing and replacing it.

I wonder if the response to this bug could explain what the _insertionTranslations.tags table is, and why some elements are in the table even though their translation seems 1-1 while others are not. For example, adding DIV to the .tags table allows the code to fall into the remove case.

I've created a small test file which demonstrates the difference in behavior between IE8 and other browsers:

<html>
<head>
 <script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
 <script type="text/javascript">
  document.observe('dom:loaded', function() {
   var repStr = "<div id='replaceme'>New Content</div>";
   var oldDiv = $('replaceme');
   Element.replace($('replaceme'), repStr);
   Element.replace($('into'), oldDiv);
  });
 </script>
</head>

<body>
Testing Element.replace on a div in IE8.
<div id="replaceme">Replace this content</div>
<div id="into">Into here</div>
</body>
</html>

Comments and changes to this ticket

  • Juriy Zaytsev

    Juriy Zaytsev May 22nd, 2009 @ 03:19 PM

    • State changed from “new” to “incomplete”

    Are there any differences when using 1.6.1RC2?

  • Tobie Langel

    Tobie Langel May 22nd, 2009 @ 03:56 PM

    I believe that results in overwriting the original element, rather than removing and replacing it.

    I'm failing to see a practical difference between these. Please enlighten me.

  • TomE

    TomE May 22nd, 2009 @ 06:16 PM

    Are there any differences when using 1.6.1RC2? Nope, same behavior (and difference) between IE and all other browsers I tried.

    I'm failing to see a practical difference between these. Please enlighten me. Sure, my application saves a reference to a dom node, replaces it in the page with another dom node, saves and replaces that. At a later time tries to place the old ones back by again replacing the current node in the page (the example basically boils down my scenario).

    That said, it's entirely likely that I am misunderstanding what replace should really be doing. Though, I'm curious why putting DIV in that insertionTransalations.tags table would be wrong?

  • Tobie Langel

    Tobie Langel May 22nd, 2009 @ 07:33 PM

    For clarification, could you please confirm. using outerHTML actually destroys the relplaced node, even if it's referenced elsewhere?

    If so, that definitely is a bug and should be handled.

    To answer your question regarding @insertionTransalations@, you would need to fix this for every tag, not just DIV.

  • TomE

    TomE May 22nd, 2009 @ 07:48 PM

    Hi Tobie,

    I am not sure I understand what you're saying, so I apologize if my description below is not on the mark.

    From my understanding, outerHTML modifies the element that it is applied to. So the code in IE calls originalElement.replace("

    newhtml
    ") and in the IE case it calls originalElement.outerHTML("
    newhtml
    ")

    This seems to me (no way an expert) to be a violation of the replace API, which I thought needed to remove the originalElement from that part of the DOM and create a new one with the specified input, or if an element and not a string is passed in to replace as a parameter, reuse the element parameter rather than create a new element.

    I think I see this behavior in most cases (other browsers, IE if the element is in the insertionTranslations table) but not if it's a DIV.

    To answer your question regarding @insertionTransalations@, you would need to fix this for every tag, not just DIV.

    The below code shows that outerHTML does in fact alter an element, so references to that element reflect the updated content. I am not sure if this is what you were asking:

    <html>
    <head>
     <script type="text/javascript" src="prototype-161rc2.js"></script>
     <script type="text/javascript">
      document.observe('dom:loaded', function() {
       var repStr = "<div id='replaceme'>New Content</div>";
       var oldDiv = $('replaceme');
       alert(oldDiv.innerHTML);
       $('replaceme').outerHTML = "<div>testing</div>";
       alert(oldDiv.innerHTML);
      });
     </script>
    </head>
    
    <body>
    Testing Element.replace on a div in IE8.
    <div id="replaceme">Replace this content</div>
    <div id="into">Into here</div>
    </body>
    </html>
    
  • Tobie Langel

    Tobie Langel May 23rd, 2009 @ 02:32 AM

    • Assigned user set to “Tobie Langel”
    • State changed from “incomplete” to “bug”
  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Tag cleared.
    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Tobie Langel

    Tobie Langel March 1st, 2010 @ 12:41 AM

    • Tag set to section:dom

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages