appendChild in IE6/IE7 does not work with existing elements

Question

I have a div that needs to be moved from one place to another in the DOM. So at the moment I am doing it like so:

flex.utils.get('oPopup_About').appendChild(flex.utils.get('oUpdater_About'));

But, IE, being, well, IE, it doesn't work. It works all other browsers, just not in IE.

I need to do it this way as the element (div) 'oUpdater_About' needs to be reused as it is populated over and over.

So i just need to be able to move the div around the DOM, appendChild will let this happen in all browsers, but, IE.

Thanks in advance!

Answer 1

You have to remove the node first, before you can append it anywhere else. One node cannot be at two places at the same time.

var node = flex.utils.get('oUpdater_About')
node.parentNode.removeChild(node);
flex.utils.get('oPopup_About').appendChild(node);

Answer 2

make sure to clone the oUpdater_About (with node.cloneNode(true)) this way you get a copy and can reuse the dom-snippet as often as you want (in any browser)

Answer 3

This post tends to suggest that there is indeed a problem with appendChild with respect to this:

http://metadeveloper.blogspot.com/2007/01/ie-7-appendchild-bug.html

Have you tried cloning it, removing it, then inserting the clone instead?

James