AppendChild issue with Internet Explorer Javascript

Question

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.

Answer 1

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

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