2

The following piece of code, works correctly in Firefox and Chrome, but it gives me a headache in IE.

var anotherDiv= document.getElementById("anotherDiv");
var destination = document.getElementById("mySourceDiv");    
destination.appendChild(anotherDiv);

I'm trying to get a Div element and place it inside another div. I get an error message (in the debug console in IE) similar to "interface not supported", and points me to the appendChild line. What I've seen is that the type of the destination variable is an object rather then a DOM element.

What can I do to append the anotherDiv to mySourceDiv? I'm trying this in IE 8.

Romeo
  • 337
  • 1
  • 6
  • 17
  • Have you tried explicitly calling "removeChild" from the parent of "anotherDiv" before re-appending it? – Pointy Nov 11 '11 at 13:47
  • I'll try that now, chrome and firefox automatically removes that div. – Romeo Nov 11 '11 at 13:49
  • @Pointy I tried it, and it doesn't work. I'm getting the reference to that div from window.opener.document.getElementById("...") and it returns an object rather then a DOM object. When I try to do removeChild I get Invalid argument. The div I'm trying to move is from another window, and I'm trying to place it in that pop-up. – Romeo Nov 11 '11 at 14:00
  • Ah - so you're trying to drag a DOM element from one window to another? Well, my (partially superstitious) belief is that IE is very picky about things wandering from context to context like that. However I can't say I know for sure that that's the problem. – Pointy Nov 11 '11 at 14:11
  • tried `anotherDiv.cloneNode()`? – Joseph Marikle Nov 11 '11 at 14:14
  • @Joseph yes I have tried that. I can't clone either from Javascript or jQuery, cause the div contains a Bing Maps javascript object that displays as static after bring cloned. But this solution works on chrome and firefox. – Romeo Nov 11 '11 at 14:17

2 Answers2

0

You probably will need something like an importNode, there are various cross browser solutions around. The issue is that each node has a corresponding document object on it, in IE and so called security doesn't play nice moving things from one document to another.

So, essentially it's doing a deep clone, but the difference between using cloneNode is that cloneNode also sets the document which you don't want.

This might get you going in the right direction: IE support for DOM importNode

Community
  • 1
  • 1
crappie coder
  • 351
  • 3
  • 8
  • I'll take a look at the link you posted. I can't do a clone on this div, cause it contains some dynamic responses from Bing Maps, and while trying to clone, I get that map as a static image. – Romeo Nov 11 '11 at 15:04
  • You won't be calling clone per-se, basically you iterate the current object and recreate every attribute, child node, etc... exactly. Looking at the importNode spec will also give you an idea of what needs to be done. But that is more than likely the problem. Hope it helps. – crappie coder Nov 11 '11 at 15:12
-2

I'd recommend using a library designed to sort through the browser incompatibilities for you. I've personally found jQuery to be quite good. jQuery has an append function.

bsegraves
  • 980
  • 13
  • 22
  • Judging from your comments above, it sounds more like a problem with the Bing Maps object in IE. Have you tried moving a different Div element using jQuery.detach() then jQuery.append()? That would at least help narrow down where the problem lies. – bsegraves Nov 11 '11 at 14:53
  • All [append](http://jsapi.info/jquery/1.7/jQuery.fn.append) does is call `appendChild`. This does not fix the problem – Raynos Nov 11 '11 at 15:05