appendChild with SVG brings a HIERARCHY_REQUEST_ER

Question

The following code works fine in chrome and Firefox, but breaks in IE 9.0

//select div where svg is to be inserted
var selSVG = document.getElementById('SVGMap');
//clear any SVG
while (selSVG.hasChildNodes()) {
selSVG.removeChild(selSVG.lastChild);
}
//add the new svg
selSVG.appendChild(loadXML("roomlayouts/"+SelectedRoomAddress));

with loadXML(...) returning an svg document from another folder and with the error on the last line of DOM Exception: HIERARCHY_REQUEST_ERR (3) line 300 character 2

Any ideas why it's not working in IE 9.0?

The implementation is here: http://chocolatezombies.com/classroom/classroom.html

Answer 1

You need to import the element from the loaded document into the document of selSVG before you may append it. Per the specs, you would do:

var room = loadXML(...);
if (room.nodeType==9){         // You can't import entire documents, so
  room = room.documentElement; // get the root node of the document
}
room = selSVG.ownerDocument.importNode( room );
selSVG.appendChild( room );

However, IE9 does not properly implement importNode. I have provided a workaround method for this as part of my answer to this question: How do I dynamically insert an SVG image into HTML?